我们在上一课做了很多基础性的训练，接下来，我们讲一些难点的知识点，首先，讲一下如何实现一个全文检索功能：

<html ng-app>

<head>

  ...

  <script src="lib/angular/angular.js"></script>

  <script>

　　function PhoneListCtrl($scope) {

  　　　　$scope.phones = [

    　　　　{"name": "Nexus S","snippet": "Fast just got faster with Nexus S."},

    　　　　{"name": "Motorola XOOM™ with Wi-Fi","snippet": "The Next, Next Generation tablet."},

    　　　　{"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."}

  　　　 ];

　　}

　</script>

</head>

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">

  　　<div class="row-fluid">

    　　<div class="span2">

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

    　　</div>

    　　<div class="span10">

      　　<ul class="phones">

        　　<li ng-repeat="phone in phones | filter:query">

          　　　　{{phone.name}}

        　　　　<p>{{phone.snippet}}</p>

        　　</li>

      　　</ul>

       </div>

  　　</div>

　　</div>

</body>

</html>

上面这个代码的功能：允许用户输入一个搜索条件，立刻就能看到电话列表中的搜索结果。

当页面加载后，AngularJS会根据输入框中的值，将其与数据模型中相同名字的变量（$scope.query）绑定在一起，以确保两者的同步性。

在这段代码中，用户在输入框中输入的值称作query，会立刻作为列表迭代器（phone in phones | filter:query`）其过滤器的输入。

使用filter过滤器：filter函数使用query的值来创建一个只包含匹配query记录的新数组。

ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来说都是透明的。

接下来，我们将在上面的例子中添加一个新的功能：增加一个让用户控制手机列表显示顺序的功能

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

Sort by:

<select ng-model="orderProp">

  <option value="name">Alphabetical</option>

  <option value="age">Newest</option>

</select>

<ul class="phones">

  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">

    {{phone.name}}

    <p>{{phone.snippet}}</p>

  </li>

</ul>

我们在html中做了如下更改：

  • 首先，我们增加了一个叫做orderProp的<select>标签，这样我们的用户就可以选择我们提供的两种排序方法。
  • 然后，在filter过滤器后面添加一个orderBy过滤器用其来处理进入迭代器的数据。orderBy过滤器以一个数组作为输入，复制一份副本，然后把副本重排序再输出到迭代器。

AngularJS在select元素和orderProp模型之间创建了一个双向绑定。而且orderProp会被用作orderBy过滤器的输入。

无论什么时候数据模型发生了改变（比如用户在下拉菜单中选了不同的选项），AngularJS的数据绑定会让视图自动更新。没有任何笨拙的DOM操作！

function PhoneListCtrl($scope) {

  $scope.phones = [

    {"name": "Nexus S",

     "snippet": "Fast just got faster with Nexus S.",

     "age": 0},

    {"name": "Motorola XOOM™ with Wi-Fi",

     "snippet": "The Next, Next Generation tablet.",

     "age": 1},

    {"name": "MOTOROLA XOOM™",

     "snippet": "The Next, Next Generation tablet.",

     "age": 2}

  ];

  $scope.orderProp = 'age';

}
  • 我们修改了phones模型—— 手机列表的数组 ——为每一个手机记录增加了一个age属性。我们会根据age属性来对手机列表进行排序。

  • 我们在控制器代码里加了一行orderProp的默认值为age。如果我们不设置默认值，这个模型会在我们的用户在下拉菜单选择一个顺序之前一直处于未初始化状态。

当应用在浏览器中加载时，“Newest”在下拉菜单中被选中。这是因为我们在控制器中我们把orderProp设置成了‘age’。所以绑定，从模型到用户界面的方向上起了作用——即数据从模型到视图的绑定。现在当你在下拉菜单中选择“Alphabetically”，数据模型会被同时更新，并且手机列表数组会被重新排序。这个时候数据绑定从另一个方向产生了作用——即数据从视图到模型的绑定。

最后，通过一幅图来看一下这个例子的M和V是如何分离的：

看了这个例子，大家是否觉得使用angular进行开发，是不是很方便啊。它封装了事件绑定，DOM操作，模板解析等操作，大大的减少了开发任务。

加油！

AngularJS入门讲解2：过滤器和双向绑定的更多相关文章

  1. AngularJS入门讲解4：多视图，事件绑定，$resource服务讲解

    上一课,大家知道,手机详细模板我们没有写出来,使用的是一个占位模板. 这一课,我们先实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来. 为了实现手机详细信息视图,我们将会使用 ...

  2. vue.js初级入门之最基础的双向绑定操作

    首先在页面引入vue.js以及其他需要用到的或者可能要用到的插件(这里我多引用了bootstrap和jquery) 引用的时候需要注意文件的路径,准备工作这样基本就完成了,下面正式开始入门. vue. ...

  3. React入门---事件与数据的双向绑定-9

    上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...

  4. AngularJS入门讲解3：$http服务和路由讲解

    上一课的例子中,我们的模型数据是硬编码的,也就是说,我们的数据不是从服务器请求回来的. 这里,我们先讲解,如何从服务器获取数据: function PhoneListCtrl($scope, $htt ...

  5. AngularJS入门讲解1：angular基本概念

    AngularJS应用程序主要有三个组成部分: 模板(Templates) 模板是您用HTML和CSS编写的文件,展现应用的视图. 您可给HTML添加新的元素.属性标记,作为AngularJS编译器的 ...

  6. angularJs入门篇-hello world 开头

    AngularJS 采用了完全不同的解决方案,它创建实时视图模板代替视图,而不是将数据合并进模板之后更新DOM. 任何一个独立视图组件中的值都是 动态替换的.这个功能可以说是AngularJS中最重要 ...

  7. AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架

    每当看到前端程序员在脚本.样式.表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js 呢? Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的支持下 ...

  8. Angular系列----AngularJS入门教程05：双向绑定（转载）

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  9. [转载]AngularJS入门教程04：双向绑定

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

随机推荐

  1. servlet中关于下载

    package com.huawei.response; import java.io.BufferedInputStream;import java.io.IOException;import ja ...

  2. Linux学习---Linux目录结构说明

    1./- 根 每一个文件和目录从根目录开始. 只有root用户具有该目录下的写权限.请注意,/root是root用户的主目录,这与/.不一样 2./bin中 - 用户二进制文件 包含二进制可执行文件. ...

  3. bloom

    bloom bloom也能实现和HDR类似的效果,但bloom的是静态的,HDR是动态渐变的, bloom在细节表现.明暗对比不如HDR,但实现HDR效果的系统资源开销也比 bloom大,bloom也 ...

  4. Memcached在Linux环境下的使用详解http://blog.51cto.com/soysauce93/1737161

    大纲 一.什么是memcached 二.memcached特性 三.memcached存储方式 四.memcached安装与配置 五.memcached结合php 六.Nginx整合memcached ...

  5. php性能优化学习笔记

    编写代码 1．尽可能多的使用内置函数2．比对内置函数的时间复杂度,选择复杂度低的 比如 循环20万次-测试isset 和 array_key_exists 耗时 对比isset.php , array ...

  6. Get The Client Info From PHP SERVER Arrary

    Get The Client Info From PHP SERVER Arrary <?php date_default_timezone_set( "Asiz/Shanghai&q ...

  7. c++ stringstream的使用

    stringstream ss;//一次创建多次使用,需要进行clear()操作清除流状态标记 int i=0; while (i<3) { ss<<"21"; ...

  8. ramfs和tmpfs的区别

    简介 ramfs和tmpfs是在内存上建立的文件系统(Filesystem).其优点是读写速度很快,但存在掉电丢失的风险.如果一个进程的性能瓶颈是硬盘的读写,那么可以考虑在ramfs或tmpfs上进行 ...

  9. ACTIVIT 5.15.1修改记录

    1.ProcessDefinitionEntity 将 protected transient ActivitiEventSupport eventSupport; 修改成: protected  A ...

  10. DataGridView相关代码

    加行号: private void dgv_RowPostPaint(object sender, DataGridViewRowPostPaintEventArgs e) { //添加行号 var ...