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

<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. python实现测试报告的bug统计

    背景:组内要针对每个项目生成测试报告,要对当前项目的一些bug进行统计.考虑到人工统计比较繁琐,而且是个长期的工作,所以写个脚本对bug进行自动统计.(我们用的bug平台是bugfree,直接可以导出 ...

  2. OPENSSL 生成https 客户端证书

    下面说下拿服务器证书.(前提是服务器是https,客户端认证用的时候),服务端不给的时候,我们自己去拿(不给怼他!,哈哈,开个玩笑,都会给的) openssl s_client -connect 域名 ...

  3. jquery中的属性和样式设置

    添加属性 $target.attr({"title":"one piece","name":"solgan"}); 为目 ...

  4. sql产生随机数字

    第一种:select cast(ceiling(rand() * 10) as int)第二种:select cast(ceiling(rand(checksum(newid()))*10) as i ...

  5. fiddler手机抓包

    配置好之后,发现手机不能连接代理服务器,用netstat发现根本就没有手机的ip地址,于是猜想是不是防火墙的问题,关闭防火墙果然能连上,开启防火墙又连不上了,这就说明确实是防火墙的问题,关闭防火墙又很 ...

  6. windows下使用redis

    一.下载windows版本的Redis 官网只提供linux版本的下载 官网下载地址:http://redis.io/download Redis 没有官方的Windows版本,但是微软开源技术团队( ...

  7. PKUWC2019 真·游记

    由于我这个大傻逼考试结果实在是没法看,所以这篇游记将尽可能略去和考试有关的内容,变成一篇真正的游记…… 接下来的内容中将会出现各种旅游攻略,寻求干货的同学可以提前左转了. Day -7 学考终于结束了 ...

  8. [Selenium] 怎样判断是否适合自动化测试

    实施自动化测试前需要对软件开发过程进行分析,以观察其是否适合使用自动化测试.通常需要满足以下条件: 1)需求变动不频繁 2)项目周期足够长 3)自动化测试脚本可重复使用 4)手工测试无法完成或者需要大 ...

  9. [Jenkins]怎样自定义发出邮件的 From Email Address 和 From Name

    在Jenkins上建了一个执行SoapUI的task,想要自定义发送邮件的地址和姓名,怎么办呢? 在Editable Email Notification里面添加Pre-send Script 脚本如 ...

  10. Oracle学习笔记(三)

    五.操作表 1.表分为行和列 约定:每行数据唯一性,每列数据同类性,每列列名唯一性. 2.数据类型 字符型 -- 固定长度的字符类型 字符类型:CHAR(n)(MAX n=2000).NCHAR(MA ...