Mel Toteng Mel Toteng - 24 days ago 8
AngularJS Question

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

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"]
}]

Answer

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

Comments