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

Question

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

然后根据用户，我可以在角色他目前的角色。

我可以列出所有的角色复选框，然后我想有基于角色的用户的复选框选中。例如。如果他是记者和公众，我希望选中这些复选框。

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