модель не работает в повторении

Question

Попытки связать данные JSON в модель внутри повтора-он дает ошибку.

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

Answer 1

Shay Как уже упоминалось, вы не можете использовать {{}} в рамках модели таким образом. Вот вам пример того, как можно реализовать:

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.com/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>

Если вы хотите сохранить информацию внутри исходного массива вы могли бы реализовать это следующим образом:

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.com/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>

Answer 2

Вы не можете написать {{}} в рамках модели типа ng-model="del{{category.id}}". Вместо этого используйте объект массив/хэш. Например: ng-model="del[category.id]"

Answer 3

Вместо использования add{{category.id}}add[category.id] и так далее, определяют add, editdel и область применения в качестве переменных в контроллере.

<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>