Trying to bind Json data into ng-model inside ng-repeat it gives error.

html :

<div ng-controller="Ctrl">
    <div>
        <table>
            <th>
                <td>add</td>
                <td>edit</td>
                <td>delete</td>
            </th>
            <tr ng-repeat="category in categories">
                <td>
                    <input id="add{{category.id}}" ng-model="add{{category.id}}" type="checkbox">{{category.name}}</td>
                <td>
                    <input id="edit{{category.id}}" ng-model="edit{{category.id}}" type="checkbox">{{category.name}}</td>
                <td>
                    <input id="del{{category.id}}" ng-model="del{{category.id}}" type="checkbox">{{category.name}}</td>
            </tr>
        </table>
    </div>

</div>

Js :

var app = angular.module('app', []);

function Ctrl($scope) {   
    $scope.selection = {
        ids: {"50d5ad": true}
    };
    $scope.categories = [ 
        {"name": "Sport", "id": "50d5ad" } , 
        {"name": "General", "id": "687ffr" },
        {"name": "Activities", "id": "678ffb" },
        {"name": "Regards", "id": "678fff" },
        {"name": "Thanks", "id": "678fer" },
        {"name": "Goes", "id": "678fgf" },
        {"name": "Oppertnities", "id": "674ffr" },
        {"name": "Convince", "id": "654ffr" },
        {"name": "Mopols", "id": "623ffr" } 
    ];    
}

Fiddle

Trying to bind Json data into ng-model inside ng-repeat it gives error.

html :

<div ng-controller="Ctrl">
    <div>
        <table>
            <th>
                <td>add</td>
                <td>edit</td>
                <td>delete</td>
            </th>
            <tr ng-repeat="category in categories">
                <td>
                    <input id="add{{category.id}}" ng-model="add{{category.id}}" type="checkbox">{{category.name}}</td>
                <td>
                    <input id="edit{{category.id}}" ng-model="edit{{category.id}}" type="checkbox">{{category.name}}</td>
                <td>
                    <input id="del{{category.id}}" ng-model="del{{category.id}}" type="checkbox">{{category.name}}</td>
            </tr>
        </table>
    </div>

</div>

Js :

var app = angular.module('app', []);

function Ctrl($scope) {   
    $scope.selection = {
        ids: {"50d5ad": true}
    };
    $scope.categories = [ 
        {"name": "Sport", "id": "50d5ad" } , 
        {"name": "General", "id": "687ffr" },
        {"name": "Activities", "id": "678ffb" },
        {"name": "Regards", "id": "678fff" },
        {"name": "Thanks", "id": "678fer" },
        {"name": "Goes", "id": "678fgf" },
        {"name": "Oppertnities", "id": "674ffr" },
        {"name": "Convince", "id": "654ffr" },
        {"name": "Mopols", "id": "623ffr" } 
    ];    
}

Fiddle

• javascript
• angularjs
• angularjs-ng-repeat

• use ng-model="add[category.id]". '{{}}' is only used to fill up angularjs scope variables with normal html code. using 'ng-' for example in ng-model, or ng-repeat etc, you're can access the angular scope variables directly because you have already stated that you're talking to Angular – Sambhav Sharma Commented Feb 16, 2015 at 9:35
• tried your fiddle and got "WARNING: Tried to load angular more than once." – Manube Commented Feb 16, 2015 at 9:36
• updated fiddle: jsfiddle/5wg4un1x – Avin Varghese Commented Feb 16, 2015 at 9:43
• look this plunker plnkr.co/edit/hKWRMj704uFinS3eP3pw?p=preview, the edit,add or delete data are storage in the same object. – Jesús Quintana Commented Feb 16, 2015 at 9:53

3 Answers 3

You cannot write {{}} within ng-model like ng-model="del{{category.id}}". Use an array/object hash instead. For example: ng-model="del[category.id]"

As Shay already mentioned you cannot use {{}} within ng-model this way. Here you have an example how you could implement it:

var app = angular.module('app', []);

function Ctrl($scope) {  
    $scope.selection_add = {};
    $scope.selection_edit = {};
    $scope.selection_delete ={};
    $scope.categories = [ 
        {"name": "Sport", "id": "50d5ad" } , 
        {"name": "General", "id": "687ffr" },
        {"name": "Activities", "id": "678ffb" },
        {"name": "Regards", "id": "678fff" },
        {"name": "Thanks", "id": "678fer" },
        {"name": "Goes", "id": "678fgf" },
        {"name": "Oppertnities", "id": "674ffr" },
        {"name": "Convince", "id": "654ffr" },
        {"name": "Mopols", "id": "623ffr" } 
    ];    
}

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Ctrl">
      <div>
          <table>
              <tr>
                  <th>add</th>
                  <th>edit</th>
                  <th>delete</th>
              </tr>
              <tr ng-repeat="category in categories">
                  <td><input id="{{category.id + '_add'}}" ng-model="selection_add[category.id]" type="checkbox">{{category.name}}</td>
                  <td><input id="{{category.id + '_edit'}}" ng-model="selection_edit[category.id]" type="checkbox">{{category.name}}</td>
                  <td><input id="{{category.id + '_delete'}}" ng-model="selection_delete[category.id]" type="checkbox">{{category.name}}</td>
              </tr>
          </table>
        <h1>Add</h1>
        {{selection_add}}
        <h1>Edit</h1>
        {{selection_edit}}
        <h1>Delete</h1>
        {{selection_delete}}
      </div>
  </div>
</div>

If you want to store the information inside the original array you could implement it this way:

var app = angular.module('app', []);

function Ctrl($scope) {
    $scope.categories = [ 
        {"name": "Sport", "id": "50d5ad" } , 
        {"name": "General", "id": "687ffr" },
        {"name": "Activities", "id": "678ffb" },
        {"name": "Regards", "id": "678fff" },
        {"name": "Thanks", "id": "678fer" },
        {"name": "Goes", "id": "678fgf" },
        {"name": "Oppertnities", "id": "674ffr" },
        {"name": "Convince", "id": "654ffr" },
        {"name": "Mopols", "id": "623ffr" } 
    ];    
}

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="Ctrl">
      <div>
          <table>
              <tr>
                  <th>add</th>
                  <th>edit</th>
                  <th>delete</th>
              </tr>
              <tr ng-repeat="category in categories">
                  <td><input id="{{category.id + '_add'}}" ng-model="category.add" type="checkbox">{{category.name}}</td>
                  <td><input id="{{category.id + '_edit'}}" ng-model="category.edit" type="checkbox">{{category.name}}</td>
                  <td><input id="{{category.id + '_delete'}}" ng-model="category.delete" type="checkbox">{{category.name}}</td>
              </tr>
          </table>

        {{categories}}
      </div>
  </div>
</div>

Instead of add{{category.id}} use add[category.id] and so on, define add, edit and del as scope variables in controller.

<tr ng-repeat="category in categories">
    <td><input id="add[category.id]" ng-model="add[category.id]" type="checkbox">{{category.name}}</td>
    <td><input id="edit[category.id]" ng-model="edit[category.id]" type="checkbox">{{category.name}}</td>
    <td><input id="del[category.id]" ng-model="del[category.id]" type="checkbox">{{category.name}}</td>
 </tr>