[AngularJS]为什么角 '吴重复' 有不同复选框区分行为然后手动列出复选框?

发布时间: 2017/4/16 18:28:54
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

如果我手动列出对应的复选框

<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 他们两个看起来一样。

解决方法 1:

这个问题涉及到角的 scope 。每个角的应用程序具有的默认一根范围。然而,它可以有多个的子范围。

一些建在指令创建新的子范围。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-scopeng-binding 类。

该指令实例化一次每一个集合中的项的模板。每个模板的项目,在这种情况下每个 li 元素都有其自己的范围。

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

  • 当添加一个新的项目时,该模板的一个新实例添加到 DOM
  • 当移除项时,其模板实例是从 DOM 中删除
  • 当项目进行重新排序时,他们的模板是由 DOM 重新排序

这里是角的官方文档

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

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

官方微信
官方QQ群
31647020