如何使用 ng-repeat 在 Angular 表单上创建唯一的 ng-form 标签

Question

我正在尝试创建一个表单部分，该表单的一部分是一个循环遍历对象列表的表格，并且每个对象都允许用户选中/取消选中属性。表单的其余部分工作正常，但我无法在复选框上设置 ng-model 属性。

这是我所拥有的：

<table>
    <thead>
        <tr>
            <td>Objects and Fields</td>
            <td>Createable</td>
            <td>Deleteable</td>
            <td>Readable</td>
            <td>Updateable</td>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="object in myAppObjects">
          <td>
            {{object.name}}&nbsp;{{object.id}}
            <input type="checkbox" name="app_access_{{object.id}}" ng-model="app_access" value="false">
          </td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
</table>

起初我尝试设置 ng-model="app_access_{{object.id}}" 以便为每个单元格设置一个唯一的 ng-model。这导致表格行重复了几十次。每个空单元格也将有一个复选框。在给定时间，每个对象和表单中的多个对象将有五个复选框。我需要能够访问控制器中的每个复选框（或者更好的是已选中的列表）。

Answer 1

由于 ngRepeat 为每个项目创建一个新的（子）范围，因此为项目创建新的 ng-models（与这些新范围绑定）将不起作用，因为这些模型/数据只能在这些内部范围内访问。我们不能编写控制器函数来访问那些内部/子范围。最好在 myAppObjects 中为模型引用一些东西（就像@Max 在他的第二个示例中建议的那样）。

如果 myAppObjects 看起来像这样：

$scope.myAppObjects = [
  {id: 1, cb1: true,  cb2: false, cb3: true, cb4: true,  cb5: false },
  {id: 2, cb1: false, cb2: false, cb3: true, cb4: false, cb5: true  },

你可以这样写你的 ng-repeat：

<tr ng-repeat="appObj in myAppObjects">
    <td>{{appObj.id}}
        <input type="checkbox" ng-model="appObj.cb1"></td>
    <td><input type="checkbox" ng-model="appObj.cb2"></td>
    <td><input type="checkbox" ng-model="appObj.cb3"></td>
    <td><input type="checkbox" ng-model="appObj.cb4"></td>
    <td><input type="checkbox" ng-model="appObj.cb5"></td>
</tr>

工作小提琴：http://jsfiddle.net/mrajcok/AvGKj/

底线：我们需要在父作用域中/上定义复选框模型（在我的小提琴中，MyCtrl 的 $scope），而不是在 ngRepeat 内部/子作用域中/上。

Answer 2

通常，如果您使用ng-repeat 迭代集合，那么您显示和编辑的项目就是集合的各个成员。因此，如果您有一个由ng-repeat 编辑的字符串数组，您会这样做

<div ng-repeat="item in list">
  <input ng-model="item" />
</div>

或者如果是你正在迭代的对象列表，你会这样做

<div ng-repeat="obj in list">
  <input ng-model="obj.item" />
</div>