ng-repeat 中的动态 ng-model

Question

使用 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...

Answer 1

您可以使用以下语法：

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);
    };
});

Demo.