javascript - 为什么 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 范围有关。默认情况下，每个 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 类。

The directive instantiates a template once per item from a collection. Every template item, in this case every li element has its own scope.

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

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

这是 Angular 的官方文档

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

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