Question

我刚开始使用AngularJS，我正在尝试制作一个用户表，显示应用程序的用户及其所处的角色（例如Admin，Editor，Anon），其中包含用于将用户带入和退出角色的复选框。

<tbody>
    <tr data-ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
        <td class="table-item-title"><a title="{{item.UserName}}" href="" ng-click="loadEditForm(item.UserName)">{{item.UserName}}</a></td>
        <td class="hmax479">{{item.Email}}</td>
        <td align="center" data-ng-repeat="role in roles" style="align:center;">
             <input type="checkbox" data-ng-model="role.IsChecked" style="align:center;"/>
        </td>
    </tr>
</tbody

使用上面的代码，它会根据单击的最后一个用户而不是单个用户更新整个组的复选框。有没有什么办法可以改变这个代码，例如“用户在用户”ng-repeat中更改这个或者我是否需要在控制器中添加新功能？

Answer 1

每个用户都可以拥有一个roles数组，以显示已分配给用户的角色。对于每个用户，在循环遍历角色时，使用filter仅检查分配的角色。您可以使用控制器中的功能添加/删除角色，因为选中/取消选中复选框。

<tbody>
  <tr data-ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
    <td class="table-item-title"><a title="{{item.UserName}}" href="" ng-click="loadEditForm(item.UserName)">{{item.UserName}}</a></td>
    <td class="hmax479">{{item.Email}}</td>
    <td align="center" data-ng-repeat="role in roles" style="align:center;">
         <input type="checkbox" data-ng-checked="role | hasRole:item.Roles" data-ng-click="addOrRemove($parent.$index, role)" style="align:center;"/>
    </td>
  </tr>
</tbody>

过滤器

app.filter('hasRole', function() {
    return function (role, userRoles) {
        var result = false;
        userRoles.forEach(function(value, index) { // loop through the roles
            // return true if the user has the role
            if(role.Name == value.Name) // This is replaced by any method of comparing roles 
               result = true;
        });
        return result;
    }
}

在您的控制器中，您实施addOrRemove()

AngularJS - 表的嵌套ng-repeat

1 个答案: