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

Question

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

然后根据a User，我可以得到他当前在 Angular 色中的 Angular 色。

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

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

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

Answer 1

听起来你想要 ngChecked指示。也许是这样的:

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

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

假设您的 currentUser 没有 Angular 色数组，而是有一个 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>

这应该使您的用户 Angular 色与复选框保持同步。如果您对用户数据结构没有那么多的控制权，您总是可以编写一个函数来使用现有数组构建一个 currentUser Angular 色对象:

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