其中angular保持DOM状态，并基于什么标准

Question

考虑这种情况：您创建一个简单的状态多项检查，并通过角度过滤器提供搜索。请参阅this fiddle。

<div ng-app>
  <h2>Instant Search</h2>
  <div ng-controller="SearchCtrl">
    <input type="text" ng-model="filterText" />
    <ul>
      <li ng-repeat="state in states | filter:filterText">
        <label>
            <input type="checkbox" ng-model="state.abbreviation">
            {{state.name}}
        </label>
      </li>
    </ul>
  </div>
</div>

检查 Alabama 和 Alaska 。然后将列表重新过滤到以 C 开头的状态。阿拉巴马州和阿拉斯加州将从DOM中删除。但是，如果您清除过滤器，它们会再次出现，但令我惊讶的是，它们似乎已经过检查。这意味着角度应该保持某种状态，某处。但在这里我只有一个简单的状态串。没有ID，没有钥匙，没有。只是简单的州名称。所以，问题是：

1. 角度js如何保持或管理状态？
2. 如何映射（使用什么类型的密钥或ID）？

Answer 1

状态保存在模型中，没有魔法。当您在选择时说ng-model=state.abbreviation时，它会设置abbreviation=true。实现它的方法是做一些像

这样的事情

<input type="checkbox" ng-model="state.selected">

请参阅我的小提琴，了解状态如何被跟踪http://jsfiddle.net/cmyworld/XF6j6/。检查时查看所选属性的更改方式。

如果您不希望跟踪状态，请不要在ng-model上使用input。

Answer 2

Angular有一个“范围”的概念，它就像任何给定元素（或它的任何子元素）的逻辑边界。如果您想查看示例下载中如何定义范围并安装此Chrome扩展程序。

https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk?hl=en

$ scope对象基本上是一个Javascript对象，用于为视图或视图的一部分添加状态和行为。 Angular Framework负责将状态绑定到DOM。这就是为什么它是一个有价值的框架：）

对状态的任何更改都会立即显示在DOM上。在您的情况下，搜索列表将在内部添加/删除states列表中的项目，框架将从该筛选列表中绘制DOM。现在，如果已经检查了一些state项，那么这些项将保持在列表中。因此，当您删除过滤器时，框架会再次处理这些项目，并且会显示相应的DOM元素以及所选的复选框。

当您使用Angular时，通常不会直接操作DOM元素，除非您正在构建新的交互式元素，如自动完成或下拉菜单等。因此，几乎总是不需要在HTML元素上使用id（除非你有css使用它。）