嵌套 ng-repeat 内的单选复选框

Question

请查看演示插件了解详细信息。

演示 Plunker

Example1

Example1 的 html 看起来像这样

<tr ng-repeat="class in Classes">
            <td>{{class.name}}</td>
            <td>
              <span ng-repeat="subject in Subjects ">
                <input type="checkbox" name="{{subject.name}}" ng-model="subject.model" 
                ng-change="Print(subject)">{{subject.name}}
              </span>
            </td>
          </tr>

在上面的plunker中，当任何一个复选框被点击时，为什么都被选中？

演示 Plunker

Example2

Example2 的 HTML 很喜欢

<tr ng-repeat="class in Classes">
        <td>{{class.name}}</td>
        <td>
          <span ng-repeat="subject in Subjects ">
            <input type="checkbox" ng-model="Subject" 
            ng-change="Print(subject,class)">{{subject.name}}
          </span>
        </td>
      </tr>

在上面的plunker中，当任何一个复选框被点击时，只有一个被选中？

Example1 和 Example2 的区别在于 ng-model 。在 Example1 中，$scope 中的默认值被分配给 ng-model，但在 Example2 中，新变量被分配了不是 $scope。我知道如果 ng-model 属性在作用域上尚不存在，它将被隐式创建并添加到作用域中。

为什么在 Example2 中可以选择单个复选框，而在 Example1 中不能选择？

Answer 1

原因是 JavaScript 原型继承。

"范围继承通常很简单，而且您通常甚至不需要知道它正在发生...直到您尝试将 2 路数据绑定（即表单元素、ng-model）到原语（例如，数字，字符串，布尔值）从子作用域内部定义在父作用域上。它不像大多数人期望的那样工作。发生的事情是子作用域有自己的属性来隐藏/隐藏同名的父属性。这不是 AngularJS 正在做的事情——这就是 JavaScript 原型继承的工作原理。 "

由于您在第二个场景中使用原语，所有ng-model 子作用域都将创建自己的属性来隐藏/隐藏同名的父属性。

在您的第一个场景中，使用了一个对象，因为每个ng-model 子范围都直接绑定到父范围，所以不会看到上述行为。（每个子实例的 ng 重复）。

假设有 第三种情况，您在控制器中创建了第二个 ng-model="Subject.modal" 并声明了 $scope.Subject={}，现在选中一个复选框将选中所有复选框，因为该值直接绑定到父级的范围与 ng-repeat 的子范围无关。

更多详情：https://github.com/angular/angular.js/wiki/Understanding-Scopes