角度可以保持DOM状态，并基于什么条件

请考虑这种情况：您创建一个简单状态多重检查，并通过角度过滤器提供对其的搜索。见this fiddle。角度可以保持DOM状态，并基于什么条件

<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>

enter image description here

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

js如何保持或管理状态？
它如何做映射（使用什么样的密钥或ID）？

来源

2013-11-21 Omid Shariati

如果你不想追踪他们的状态，复选框是什么？可以设置一条指令，在执行搜索时清除它们。不清楚你需要什么 – charlietfl

我想知道角度js如何追踪它们。看到我的第二个问题（编号2）。 –

只要您添加了'ng-model'，就会为2路绑定创建一个范围变量，除非您已经创建了它。 http://docs.angularjs.org/api/ng.directive:ngModel – charlietfl

状态被保存在模型中，没有魔法。当你在选择时说ng-model=state.abbreviation它设置abbreviation=true。去它的方法是做类似

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

见我的小提琴，了解国家是如何被追踪http://jsfiddle.net/cmyworld/XF6j6/。当您查看某些内容时，请查看所选属性如何更改。

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

来源

2013-11-21 05:07:45 Chandermani

我像你说的那样更新那部分代码。我想知道它如何做映射（使用什么样的密钥或ID）？ –

查看输入复选框文档。一切都是模型驱动的，没有什么像键或id。 'ng-model'将选择值绑定到模型中的属性。可以使用“ng-true-value”和“ng-false-value”将自定义值分配给模型属性。 – Chandermani

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使用它）。

来源

2013-11-21 05:12:57 Ketan

角度可以保持DOM状态，并基于什么条件

回答

相关问题