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

<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. 【Git】一、Git简介

    一.什么是Git Git是一款免费的开源分布式版本控制系统,可以有效的,高速的处理从很小到非常大的文件. 二.Git VS SVN 1. Git 是分布式的,SVN 是集中式的 2. Git 存储的是 ...

  2. hadoop之HDFS学习笔记（一）

    主要内容:hdfs的整体运行机制,DATANODE存储文件块的观察,hdfs集群的搭建与配置,hdfs命令行客户端常见命令:业务系统中日志生成机制,HDFS的java客户端api基本使用. 1.什么是 ...

  3. python之name binding

    ［python之name binding］ 1. 名字   名字是对一个对象的称呼,一个对象可以只有一个名字,也可以没有名字或取多个名字.但对象自己却不知道有多少名字,叫什么,只有名字本身知道它所指向 ...

  4. MySql 关键字冲突解决办法

    今天把项目发布到另一台机器上时,因为mysql版本不一致,出现了关键字冲突,virtual关键字,不清楚是不是mysql添加的新特性. select * from herb where name=&q ...

  5. Python dict() 函数

    Python dict() 函数  Python 内置函数 描述 dict() 函数用于创建一个字典. 语法 dict 语法: class dict(**kwarg) class dict(mappi ...

  6. OGNL概述

    -------------------siwuxie095 OGNL 概述 1.OGNL 即 Object-Graph Navigation Language,对象图导航语言, 它是一个应用于 Jav ...

  7. 34-TypeError: BoxSizer.AddSpacer(): argument 1 has unexpected type 'tuple'

    TypeError: BoxSizer.AddSpacer(): argument 1 has unexpected type 'tuple'这个错误很烦,折腾了好久: 原因有二:1.因为它现在只能有 ...

  8. mysql新建用户并授权

      参考:https://www.cnblogs.com/zhangdiIT/p/8116776.html

  9. android安装前期遇到的问题

    1.安装的eclipse与对应的java版本位数要一致,要么32位,要么64位. 2.关于新版ADT创建项目时出现appcompat_v7的问题 更新ADT至22.6.0版本之后,创建新的安装项目,会 ...

  10. 数据挖掘中ID3算法实现zz

    id3 function D = ID3(train_features, train_targets, params, region) % Classify using Quinlan's ID3 a ...