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

有关详细信息，请浏览演示掠夺

演示弹跳器

示例1的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>

在上述对话框中，当单击任何一个复选框时，为什么选择所有复选框

演示弹跳器

示例2的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>

在上述对话框中，当单击任何一个复选框时，是否仅选择一个

示例1和示例2之间的区别在于ng模型。在示例1中，$scope中的默认值分配给ng模型，但在示例2中，分配的新变量不是$scope。我知道如果ng模型属性在作用域上不存在，它将被隐式创建并添加到作用域中

为什么在示例2中可以选择单个复选框，而在示例1中不可以选择单个复选框？

原因在于JavaScript原型继承

作用域继承通常是直接的，您甚至不需要知道它正在发生。。。在您尝试双向数据绑定（即表单元素）之前，将模型从子范围内绑定到父范围上定义的基元，例如数字、字符串、布尔值。它不像大多数人期望的那样工作。发生的情况是，子作用域获取自己的属性，该属性隐藏/隐藏同名的父属性。这不是AngularJS正在做的事情——这是JavaScript原型继承的工作方式

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

在第一个场景中，当使用对象时，不会看到上述行为，因为每个ng模型子范围都直接绑定到父范围。ng的每个子实例都会重复

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

有关更多详细信息：

在第一个变量subject.name中，所有行之间共享，因为您从ng repeat分配变量，在第二个变量中，您为每行subject变量使用任意唯一性。