为什么angular`ng-repeat`有不同的复选框区分行为然后手动列出复选框？

Question

如果我手动列出复选框

<ul>
    <li>
        <input type="checkbox" ng-model="checkState"/>
    </li>
    <li>
        <input type="checkbox" ng-model="checkState"/>
    </li>
</ul>

选中一个复选框可选中所有复选框.

但是如果我使用ng-repeat

<div>
    <ul>
        <li ng-repeat="elem in someArray">
            <input type="checkbox" ng-model="checkState"  />
        </li>
    </ul>
</div>

选中一个复选框只会检查其中一个

是否有一个原因？从DOM看,它们看起来都一样.

Answer 1

该问题与 Angular 相关scope。默认情况下，每个 Angular 应用程序都有一个根范围。但是它可以有多个子作用域。

一些内置指令会创建新的子作用域。ng-repeat就是一个例子。该指令中的每个元素都有自己的范围。创建这些作用域后，它们会自动添加为父作用域的子级。

这将创建一个类似于 DOM 的树结构

rootScope
  - childScope
  - childScope
  - childScope

要查看其实际效果，请检查浏览器的 HTML。它看起来像这样

<div>
  <li ng-repeat="elem in someArray" class="ng-scope ng-binding">elem 1
    <input type="checkbox" ng-model="checkState"  />
  </li>
  <li ng-repeat="elem in someArray" class="ng-scope ng-binding">elem 1
    <input type="checkbox" ng-model="checkState"  />
  </li>
</div>

请注意，每个 ng-repeat 元素都有一个ng-scope和 一个ng-binding类。

该指令为集合中的每个项目实例化一个模板。每个模板项（在本例中为每个li元素）都有其自己的范围。

该指令用于$watchCollection检测集合中的更改。ng-repeat 对 DOM 进行以下更改

• 添加新项目时，模板的新实例将添加到 DOM
• 当一个项目被删除时，它的模板实例也会从 DOM 中删除
• 当项目重新排序时，它们的模板将由 DOM 重新排序

这是 Angular 的官方文档

https://docs.angularjs.org/api/ng/directive/ngRepeat

https://docs.angularjs.org/guide/scope