Angular ng-model 在 ng-repeat 中不起作用

Question

尝试将 Json 数据绑定到 ng-repeat 中的 ng-model 中，它会出错。

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

你不能像 ng-model="del{{category.id}}" 那样在 ng-model 中写 {{}}。请改用 array/object 散列。例如：ng-model="del[category.id]"

Answer 2

正如 Shay 已经提到的，您不能以这种方式在 ng-model 中使用 {{}}。这里有一个如何实现它的例子：

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 3

代替add{{category.id}}使用add[category.id]等，在控制器中定义add、edit和del作为作用域变量。

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

Angular ng-model 在 ng-repeat 中不起作用

Angular ng-model not working inside ng-repeat

javascript

angularjs

angularjs-ng-repeat