angularjs - 如何让 Angular js 在过滤器中隐藏 DOM 元素，而不是删除它们

Question

带过滤器的 Angular ng-repeat 是这样工作的(我刚刚通过在 Chrome 开发者工具中观察 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>

我现在需要的是让 Angular js 隐藏节点，而不是删除它们。换句话说，当我过滤节点时，例如我想让那些不满足过滤条件的节点具有一个hidden类，我会通过CSS隐藏它们。

Answer 1

ng-show 放置在重复元素上将导致它们被隐藏:Fiddle http://jsfiddle.net/NAumK/19/

http://docs.angularjs.org/api/ng.directive:ngShow

<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="TodoCtrl">
    <input type="text" ng-model="filterText" />
    <ul>
      <li ng-repeat="state in states" ng-show="state.name.indexOf(filterText) != -1">
        <label>
            <input type="checkbox" ng-model="state.abbreviation">
            {{state.name}}
        </label>
      </li>
    </ul>
    <input type="text" ng-model="textFilter" />
  </div>
</div>

过滤器像 ng-if 和 ng-switch 指令一样删除元素。您还可以使用 css 和 ng-class 指令来隐藏元素，但为了清楚起见，我建议坚持使用 ng-show 。进一步需要注意的是，隐藏而不是删除元素会使测试用例更难证明。您可能会与显示不正确但仍通过(Selenium)测试的类发生冲突。