在 Angular 中匹配 2 个数组，匹配作为复选框

Question

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

然后根据一个User，我可以得到他当前角色中的角色。

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

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

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

Answer 1

听起来你想要ngChecked 指令。可能是这样的：

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

但要在选中或取消选中该框时更新用户角色，您可能需要稍微不同的结构。

假设你的currentUser，不是一个角色数组，而是一个角色属性，它在你的控制器中的值是一个像这样的对象：

$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，如果您使用的是更新版本，则需要进行一些调整。