javascript - 如何使用 ng-repeat in 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 。这导致表行重复了几十次。每个空单元格还将有一个复选框。在给定时间，表单中的每个对象和多个对象将有五个复选框。我需要能够访问 Controller 中的每个复选框(或者更好的是选中的复选框的列表)。

Answer 1

由于 ngRepeat 为每个项目创建了一个新的(子)范围，因此为这些项目创建新的 ng-models(与这些新范围相关联)将不起作用，因为这些模型/数据只能在这些内部范围内访问。我们无法编写 Controller 函数来访问这些内部/子作用域。最好在 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>

工作 fiddle :http://jsfiddle.net/mrajcok/AvGKj/

底线:我们需要在父作用域(在我的 fiddle 中，MyCtrl 的 $scope)中/上定义复选框模型，而不是在 ngRepeat 内部/子作用域中/上定义。