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

<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. Common Lisp

    [Common Lisp] 1.操作符是什么? 2.quote. 3.单引号是quote的缩写. 4.car与cdr方法. 5.古怪的if语句. 6.and语句. 7.判断是真假. null 与 no ...

  2. linux qmake commend not found

    最近在学习Go语言,想要安装IDE liteide,在按这篇教程进行安装,当执行./build_linux.sh的时候,提示qmake commend not found的字眼,于是在网上搜,说出现这 ...

  3. TouchEvent里的targetTouches、touches、changedTouches的区别的具体体现是？

    touches:当前屏幕上所有触摸点的集合列表 targetTouches: 绑定事件的那个结点上的触摸点的集合列表 changedTouches: 触发事件时改变的触摸点的集合 举例来说,比如div ...

  4. 「这样玩Hexo」修改主题自定义实现界面和功能的自定义

    首发于个人博客 想获得更好的阅读体验,烦请移步⬆️ 前言 作为一个颜党,在换了许多Hexo的主题后,选择了现在使用的fexo主题.但是相比于大多数博主使用的NEXT,fexo还是不够powerful, ...

  5. Visual Studio 2017 无法打开包括文件: “QOpenGLWidget”: No such file or directory

    编译项目时,发现报错:VS 无法打开包括文件: “QOpenGLWidget”: No such file or directory,在Qt对应的目录(E:\Qt\Qt5.12.2\5.12.2\ms ...

  6. php通过反射执行某方法

    简单记录下通过反射来获取某方法的参数,然后利用php内置函数类执行此方法 一个简单的test类 class test { //2个参数默认值 public function b($name='lemo ...

  7. h5 时间控件问题，怎么设置type =datetime-local 的值

    在js中设置自定义时间到date控件的方法: 1.在html5中定义时间控件 <input type="date" id="datePicker" val ...

  8. Python爬虫进阶一之爬虫框架概述

    综述 爬虫入门之后,我们有两条路可以走. 一个是继续深入学习,以及关于设计模式的一些知识,强化Python相关知识,自己动手造轮子,继续为自己的爬虫增加分布式,多线程等功能扩展.另一条路便是学习一些优 ...

  9. [SoapUI]怎样从应答报文中获取某个字段的值，然后用其改写某个变量

    import com.eviware.soapui.support.GroovyUtils def groovyUtils = new GroovyUtils( context ) def holde ...

  10. 解决Error running 'index.jsp : Address localhost:1099 is already in use的方法

    晚上在idea中  启动服务器一次后 正常运行,但是改了注解配置后  报错,报错为Error running 'index.jsp : Address localhost:1099 is alread ...