How to assign reassign checkbox ng-model on ng-repeat

Question

Please help me out. I have a checkboxes with models defined. I am displaying checkboxes and using the model to set if the checkbox is selected or not. Below is the code for setting the ng-model.

LoadValues(obj) {

  vm.index = false;
  vm.create = false;
  vm.edit = false;
  vm.delete = false;
  vm.other = false;

  var pList = obj.Functions;
  var currentModule = obj.Name;

  for (var i = 0; i < pList.length; i++) {

    var currentItem = pList[i];
    console.log(currentItem)

    if (currentItem.search("Index") > 0) {
      vm.index = true;
      console.log(vm.index);
    } else if (currentItem.search("Create") > 0) {
      vm.create = true;
    } else if (currentItem.search("Edit") > 0) {
      vm.edit = true;
    } else if (currentItem.search("Delete") > 0) {
      vm.delete = true;
    } else if (currentItem.search("Other") > 0) {
      vm.other = true;
    }
  }
}

Below is the check boxes.

<tbody>
  <tr ng-repeat="item in list">
    <td>
      {{item.Name}}
    </td>
    <td>
      <input id="Index" type="checkbox" ng-model="vm.index" ng-click="EditRole(Right,item.Module,'Index')">
    </td>
    <td>
      <input id="Create" type="checkbox" ng-model="vm.create" ng-click="EditRole(item.Role,'Create')">
    </td>
    <td>
      <input id="Edit" type="checkbox" ng-model="vm.edit" ng-click="EditRole(item.Role,item.Module,'Edit')">
    </td>
    <td>
      <input id="Delete" type="checkbox" ng-model="vm.delete" ng-click="EditRole(item.Role,item.Module,'Delete')">
    </td>
    <td>
      <input id="Other" type="checkbox" ng-model="vm.other" ng-click="EditRole(item.Role,item.Module,'Other')">
    </td>
  </tr>
</tbody>

The problem is it assigns the same ng-model to all the items in the list. I have tried to find solutions nothing is helping. Your help would be very much appreciated.

i am reading my data from a json file. Below is some example data:

    [ 
{"Role":"Staff","Admins":[{"Name":"Username","userRights":["UserEdit","UserCreate"]
    }]

Use `ng-model="item.index"`, `item.create`, `item.edit` etc. — devqon, Nov 08 '16 at 11:47
This answer might be helpful http://stackoverflow.com/a/14516885/1599191 — Graham Walters, Nov 08 '16 at 11:48

score 0 · Answer 1 · answered Nov 08 '16 at 11:06

0

Your ng-model has to be like so:

ng-model="item.index"

And then in your controller inside the for loop:

current_item.index = true;

Hope it helps =)

answered Nov 08 '16 at 11:06

Gustavo Gabriel

1,378
2
17
28

I am reading my data from a json file. So the currentItem is from a file. Sorry i didnt specify that. – Mel Toteng Nov 08 '16 at 11:29

Graham Walters · Accepted Answer · 2016-11-08T12:34:57.603

The easiest way to use ng-model on a checkbox is to pass it an abject. The code below converts an array of items into an object for the checkboxes.

I created a variable called $scope.userRights which contains all of the available options.

In the HTML we loop though each field displaying its name and then loop though all of the userRights.

The submit button then converts the object back into the array format we received.

HTML

<div ng:controller="MainCtrl">
  <button ng-click="submit()">Submit</button>

  <table>
    <tr ng-repeat="field in fields">
      <td ng-bind="field.Name"></td>

      <td ng-repeat="right in userRights">
        <label>
          <input type="checkbox" ng-model="field.userRights[right]" /> {{right}} 
        </label>
      </td>
    </tr>
  </table>

  <pre ng-bind="fields | json"></pre>
</div>

JavaScript

app.controller('MainCtrl', function($scope) {
  $scope.userRights = ["UserEdit","UserCreate","UserSomethingElse"];

  $scope.fields = [
    {"Name":"Username","userRights":["UserEdit","UserCreate"]},
    {"Name":"Password","userRights":["UserEdit"]}
  ];

  // Convert array to object
  $scope.fields.forEach(function(field) {
    var res = {};
    field.userRights.forEach(function(right) {
     res[right] = true;
    });
    field.userRights = res;
  });

  function objectValues(obj) {
    var res = [];
    var keys = Object.keys(obj);
    for (var i=0; i<keys.length; i++) {
      if (obj[keys[i]]) res.push(keys[i]);
    }
    return res;
  }

  // Convert object to array
  $scope.submit = function() {
    $scope.fields.forEach(function(field) {
      field.userRights = objectValues(field.userRights);
    });
  };
});

Demo

Is it possible to do this without the button. Because the intention is to have all that performed on page load. — Mel Toteng, Nov 08 '16 at 12:33
Check my updated answer. The button simply converts the object structure when the user is finished. Here's a working [demo](http://plnkr.co/edit/cLCx289fSMhosBv2J7RZ?p=preview) where you can see the structure on screen — Graham Walters, Nov 08 '16 at 12:38

How to assign reassign checkbox ng-model on ng-repeat

2 Answers2