我希望能够在Angular网页中管理用户角色。我有一个对象,其中列出了系统中的所有当前角色。

javascript - 匹配Angular中的2个数组,并将匹配项作为复选框-LMLPHP

然后根据一个用户,我可以得到他当前的角色。

javascript - 匹配Angular中的2个数组,并将匹配项作为复选框-LMLPHP

我可以将所有角色都列为复选框,然后我要根据角色选择用户的复选框。例如。如果他是“记者”和“公众”,我希望选中这些复选框。

  <label ng-repeat="m in UserDetails">
            <input type="checkbox" ng-model="UserDetails[m]" /> {{m}}
  </label>

UserDetails中,我列出了所有角色。我要选中复选框。

最佳答案

听起来您想要ngChecked指令。也许像这样:

<input type="checkbox"
       ng-model="UserDetails[m]"
       ng-checked="currentUsersRoles.indexOf(m) >= 0" /> {{ m }}

但是要使用户的角色在选中或未选中时更新,您可能需要稍有不同的结构。

假设您的currentUser,不是拥有一个角色数组,而是拥有一个roles属性,该值在您的 Controller 中是一个像这样的对象:
$scope.currentUser.rolesObj = {
  "Public": true,
  "Reporter": false,
  "Partner": false,
  "LCSP": false,
  "Admin": false,
  "StrategicPursuit": false,
  "PA": false
};

然后创建您的复选框列表:
<label ng-repeat="(role, value) in currentUser.rolesObj">
  <input type="checkbox" ng-model="value" /> {{ role }}
</label>

这应该使您的用户角色与复选框保持同步。而且,如果您对用户数据结构没有太多控制权,则始终可以编写一个使用现有数组构建currentUser角色对象的函数:
$scope.rolesObjFromArray = function (rolesArr) {
  var rolesObj = {
    "Public": false,
    "Reporter": false,
    "Partner": false,
    "LCSP": false,
    "Admin": false,
    "StrategicPursuit": false,
    "PA": false
  };

  rolesArr.forEach(function (role) {
    rolesObj[role] = true;
  });

  return rolesObj;
}

$scope.currentUser.rolesObj = rolesObjFromArray(currentUserRoles);

如果有帮助,这是JSFiddle to play with。请注意,JSFiddle使用的是Angular 1.2.1,如果使用的是更新版本,则需要进行一些调整。

关于javascript - 匹配Angular中的2个数组,并将匹配项作为复选框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35808847/

10-12 13:32
查看更多