[Angular Tutorial] 3-Filtering Repeaters

Posted 2020-07-11

在上一步中，我们花了很大功夫来布局应用的基础，所以我们现在做点简单点的吧！我们将会添加一个全文本搜索框（没错，这很简单）。

　　·我们的应用现在会有一个搜索框，注意页面中手机列表的改变取决于用户在搜索框键入的内容。

最重要的变化列举如下，当然，你也可以点击这里在GitHub上查看全部的不同。

控制器

我们对控制器不做任何修改。

模板

app/index.html:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      Search: <input ng-model="query">

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in phones | filter:query">
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

我们添加了标准的HTML<input>标签并且使用Angular的过滤器函数来为ngRepeat指令处理输入的内容。

这可以使用户在电话列表中输入搜索条件并且可以及时看到搜索结果，新的代码展示了：

　　·数据绑定，这是Angular的核心特性之一。当页面加载时，Angular将输入框的名字和数据模型中有相同名字的变量绑定到一起，并且保持二者的同步。

　　在这段代码中，用户在输入框中输入的数据（叫做query）可以立即作为一个列表迭代器(phone in phones | filter:query)中的过滤器。当数据模型的改变导致了迭代器输入的改变时，迭代器会高效地更新DOM来反映当前数据模型的状态。

　　·filter过滤器的使用：filter函数使用query的值来创建一个只包含那些匹配query的值得电话列表。

　　·通过filter过滤器返回的改变的电话数目，ngRepeat自动更新视图，这个过程对于开发者来说是完全透明的。

总结

我们已经添加了全文搜索，让我们进入下一步来学习如何为电话应用添加排序功能吧！