使用Angular JS，我有这个对象
var pages = [
{ name: 'users', title : "Users" },
{ name: 'roles', title : 'Roles' }
];
我正在尝试为用户角色创建页面。为此，我需要每个页面4个复选框。每页必须有4条规则。访问，显示，编辑，删除。
以ng-repeat显示页面
<div ng-controller='PageCtrl'>
<ul>
<li ng-repeat='page in pages'>
{{ page.title }}
<input type="checkbox" name="access"> Access
<input type="checkbox" name="show"> Show
<input type="checkbox" name="edit"> Edit
<input type="checkbox" name="delete"> Delete
</li>
</ul>
</div>
因此，我需要将这些复选框的值传递给$ scope。如何为每个复选框绑定模型？
像这样
<input type="checkbox" name="access" ng-model='page.name+_access'> Access
复选框模型名称应以page.name开头。像users_access，users_show ...
您可以使用以下语法：
ng-model="page[page.name+'_access']"
但实际上，看起来一个人也可以将这些组也移到控制器中，然后再使用另一个ng-repeat。像这样：
HTML：
<div ng-controller="PageCtrl">
<ul>
<li ng-repeat='page in pages'>{{ page.title }}
<label ng-repeat="right in rights">
<input type="checkbox" ng-model="page[page.name + '_' + right]" name="{{right}}" />{{right|capitalize}}</label>
<button ng-click="log(page)">Log</button>
</li>
</ul>
</div>
JS：
var module = angular.module('myAp', [])
.controller('PageCtrl', ['$scope', function ($scope) {
$scope.pages = [{
name: 'users',
title: "Users"
}, {
name: 'roles',
title: 'Roles'
}];
$scope.rights = ['access', 'show', 'edit', 'delete'];
$scope.log = function (page) {
console.log(page);
}
}]).filter('capitalize', function() {
return function (value) {
return value.charAt(0).toUpperCase() + value.slice(1);
};
});
演示。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句