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

您无法在{-1}}等ng-model中编写{{}}。请改用数组/对象哈希。例如：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>

角度ng模型在ng-repeat内部不起作用

3 个答案: