javascript - Dynamic ng-model in ng-repeat - Stack Overflow

admin管理员组

文章数量:1314381

Using Angular JS, I have this object

var pages = [ 
    { name: 'users', title : "Users" }, 
    { name: 'roles', title : 'Roles' }
];

I'm trying to create a page for user roles. For that I need 4 checkboxes for each page. Each page must have 4 rules. Access, show, edit, delete.

Displaying pages in a 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>

So I need to pass those checkboxes values to the $scope. How can I bind a model for each checkbox?

Like this

<input type="checkbox" name="access" ng-model='page.name+_access'> Access

Checkbox model name should start with page.name. Like users_access, users_show...

Using Angular JS, I have this object

var pages = [ 
    { name: 'users', title : "Users" }, 
    { name: 'roles', title : 'Roles' }
];

I'm trying to create a page for user roles. For that I need 4 checkboxes for each page. Each page must have 4 rules. Access, show, edit, delete.

Displaying pages in a 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>

So I need to pass those checkboxes values to the $scope. How can I bind a model for each checkbox?

Like this

<input type="checkbox" name="access" ng-model='page.name+_access'> Access

Checkbox model name should start with page.name. Like users_access, users_show...

• javascript
• angularjs

Share Improve this question Follow edited Mar 23, 2015 at 11:17 Rasit asked Mar 22, 2015 at 23:42 RasitRasit 4311 silver badge66 bronze badges 3

• Bind them to a "page.access", "page.show", "page.edit", "page.edit" ? Dont mix your visiualization with your actual view model. – Marvin Smit Commented Mar 22, 2015 at 23:48
• Meaning to say you want to know from the controller which checkboxes you have ticked? – swlim Commented Mar 22, 2015 at 23:49
• Yes. I need those checkbox values in controller. – Rasit Commented Mar 22, 2015 at 23:54

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You can use the following syntax:

ng-model="page[page.name+'_access']"

But as a matter of fact, it looks one can move those groups into controller as well, then use another ng-repeat. Like this:

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.

本文标签： javascriptDynamic ngmodel in ngrepeatStack Overflow