Question

我刚刚开始，我必须说它太有趣了！我在这个网站上使用的例子 http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/特别是使用角度js＆＃39;

过滤数据

我按照这个例子运行正常。该示例显示了列表，当您键入名称时，它将对其进行过滤并显示完全匹配。

我不想停在那里玩更多，我想要做的就是最初不显示任何列表，并显示用户类型列表。这是我的index.html：

<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
    <input type='text' ng-init='searchText=" "' ng-model='searchText' />
    <ul>
        <li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
    </ul>
</div>

你可以看到我在searchText变量上执行ng-init，这在我最初打开页面时工作正常，即没有列表。但是当我输入名称时，即使清除输入框，过滤完成后列表也会保留在那里。清除输入框后，如何使列表消失？

我是否需要某种自定义过滤器？

如果我使用错误的条款，请原谅我的无知，请告诉我正确的：）

Answer 1

你可以使用ng-show / ng-hide来显示/隐藏基于特定条件的列表，就像你想要它在searchText上一样

    <ul ng-show="searchText !==''">
        <li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
    </ul>

Answer 2

实现你想要的另一个想法：

<input type="text" ng-model="searchText" />
<ul>
  <li ng-repeat="person in people | filter:(searchText || ' ')">#{{person.id}} {{person.name}}</li>
</ul>

或者如果您想在输入框为空时按某个默认值进行过滤：

<li ng-repeat="person in people | filter:(searchText || 'John')">#{{person.id}} {{person.name}}</li>

使用过滤器在Angularjs中执行搜索后清除列表？

2 个答案: