学习笔记-AngularJs（二）写了个所有程序语言入门时都必须要写的Hello World，那么从现在开始做那个之前说过的互联网大佬介绍的学习例子，当然这里开始会慢慢按照之前说过的目录来搭建这个学习的demo，将控制器、过滤器、指令、服务、基本配置都独立成一个个js文件，直接贴张效果图（http://t.cn/RUbL4rP，一不小心）：

（有点简陋，之后再把样式写好看些！）

这里实现的功能是这样的，在前台遍历phones的对象数组，然后可以按照年龄和名字排序，也可以通过输入字符串过滤检索。代码如下：

html：

<!doctype html>

<html ng-app ng-controller="PhoneListCtrl">

  <head>

  	<meta charset='utf8' />

  	<title ng-bind="'Google Phone Gallery:' + query"></title>

  	<!-- <title ng-bind-template="Google Phone Gallery:{{query}}"></title> -->

    <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

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

  </head>

  <body>

    <div class="example2">

    	Select:

    	<select name="select" id="select" ng-model='order'>

    		<option value="name">名字</option>

    		<option value="age">年龄</option>

    	</select>

    	Search: <input name="search" type="text" ng-model='query' />

 		<ul>

 		<!--迭代器-->

 		<li ng-repeat='phone in phones | filter:query | orderBy:order'>

 			    {{phone.name}}

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

 		</li>

 		</ul>

    </div>

  </body>

</html>

js：

function PhoneListCtrl($scope){

	$scope.phones = [

		{'name':'xioabin','number':'18824863682','age':'12'},

		{'name':'xioalong','number':'18824863683','age':'19'},

		{'name':'xiaohua','number':'18824863684','age':'5'},

		{'name':'xiaoMING','number':'18824863685','age':'1'},

		{'name':'xiaoTU','number':'18824863686','age':'2'},

		{'name':'xiaoKE','number':'18824863687','age':'40'},

	];

		$scope.order = 'name';

}

代码不多，但是也有挺多知识点在里面的，首先我们使用no-repeat遍历js文件里面的phones对象数组，于是后面在html中出现了ng-repeat='phone in phones | filter:query | orderBy:order'，那这是这样解释的，遍历phones，按照query过滤，order排序，而filter和orderBy则是angularJs的迭代器，相应的自带迭代器还有：currency（货币转换）、json（json格式转换）、date（日期转换）、lowercase、uppercase（大小写转换）等。而query和order是input中ng-model绑定的数据，那这样就可以实时拿着条件检索数据。这里有几点是要讲的：

ng-app    标识以下内容就归angularjs管理

ng-controller 指得是包裹的内容中是在控制器PhoneListCtrl的控制下，在其作用域下去操作变量和函数

<title ng-bind="'Google Phone Gallery:' + query"></title> 
<title ng-bind-template="Google Phone Gallery:{{query}}"></title>

这里是两种数据绑定的形式，ng-bind和ng-bind-template，异同上面已经很明显地体现出来了！当然还有其他的用途，就是有时候我们是这样写的<span>{{bind}}</span>的，然后在拼命刷新页面的时候，会经常看到{{bind}}的闪现，那么用ng-bind和ng-bind-template就可以解决了，像这样<span ng-bind="bind"></span>。

学习笔记-AngularJs（三）的更多相关文章

  1. 学习笔记-AngularJs（十）

    前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...

  2. 学习笔记-AngularJs（九）

    到目前为止,我们所做的学习案例都是没有加任何动画效果的,对于以往来说,我们经常会去使用一些动画插件或是css框架(如:animate.css)来点缀我们的网页,这样显得生动,高大上,那么接下来我们可以 ...

  3. PyQt4入门学习笔记（三）

    # PyQt4入门学习笔记(三) PyQt4内的布局 布局方式是我们控制我们的GUI页面内各个控件的排放位置的.我们可以通过两种基本方式来控制: 1.绝对位置 2.layout类 绝对位置 这种方式要 ...

  4. C#可扩展编程之MEF学习笔记（三）：导出类的方法和属性

    前面说完了导入和导出的几种方法,如果大家细心的话会注意到前面我们导出的都是类,那么方法和属性能不能导出呢???答案是肯定的,下面就来说下MEF是如何导出方法和属性的. 还是前面的代码,第二篇中已经提供 ...

  5. X-Cart 学习笔记（三）X-Cart框架2

    目录 X-Cart 学习笔记(一)了解和安装X-Cart X-Cart 学习笔记(二)X-Cart框架1 X-Cart 学习笔记(三)X-Cart框架2 X-Cart 学习笔记(四)常见操作 3.了解 ...

  6. Dynamic CRM 2013学习笔记（三十三）自定义审批流4 - 规则节点 -有分支的流程处理

    上次介绍过节点的基本配置<Dynamic CRM 2013学习笔记(三十二)自定义审批流3 - 节点及实体配置>,这次介绍下规则节点,因为有时流程里会有一些分支.合并,这时就要用到规则节点 ...

  7. Dynamic CRM 2013学习笔记（三十七）自定义审批流7 - 初始化（整套审批流下载、安装）

    前面介绍了自定义审批流的配置.使用,这篇介绍下如何进行初始化. 一. 下载 从下面的地址下载整个审批流: http://yunpan.cn/cZ5Rdx5HCt3VF 下载完后,一共有三块内容: 二. ...

  8. .NET Remoting学习笔记（三）信道

    目录 .NET Remoting学习笔记(一)概念 .NET Remoting学习笔记(二)激活方式 .NET Remoting学习笔记(三)信道 参考:♂风车车.Net .NET Framework ...

  9. opencv学习笔记（三）基本数据类型

    opencv学习笔记(三)基本数据类型 类:DataType 将C++数据类型转换为对应的opencv数据类型 OpenCV原始数据类型的特征模版.OpenCV的原始数据类型包括unsigned ch ...

随机推荐

  1. [osg][原]自定义osgGA漫游器

    相机矩阵变化基础:http://blog.csdn.net/popy007/article/details/5120158 osg漫游器原理:http://blog.csdn.net/csxiaosh ...

  2. 虹软2.0 免费人脸识别C#类库分享

    目前只封装了人脸检测部分的类库,供大家交流学习,肯定有问题,希望大家在阅读使用的时候及时反馈,谢谢!使用虹软技术开发完成 戳这里下载SDKgithub:https://github.com/dayAn ...

  3. MYSQL常用函数（控制流函数）

    MySQL有4个函数是用来进行条件操作的,这些函数可以实现SQL的条件逻辑,允许开发者将一些应用程序业务逻辑转换到数据库后台. MySQL控制流函数: CASE WHEN[test1] THEN [r ...

  4. JAVA基础知识总结：二十二

    一.反射机制 1.概念 反射机制指的是程序在运行的过程中,对于任意一个类,都能够知道这个类对应的所有的属性和方法:对于任意一个对象,都能够调用其中的任意的方法和属性,在Java中,把这种动态获取信息以 ...

  5. Asp.net core 学习笔记 ( User Secrets )

    参考 : http://cnblogs.com/nianming/p/7068253.html https://docs.microsoft.com/en-us/aspnet/core/securit ...

  6. 差异基因分析：fold change(差异倍数), P-value(差异的显著性)

    在做基因表达分析时必然会要做差异分析(DE) DE的方法主要有两种: Fold change t-test fold change的意思是样本质检表达量的差异倍数,log2 fold change的意 ...

  7. 远程服务器返回了意外相应：（413） Request Entity Too Large。

    在从客户端向WCF服务端传送较大数据(>65535B)的时候,发现程序直接从Reference的BeginInvoke跳到EndInvoke,没有进入服务端的Service实际逻辑中,怀疑是由于 ...

  8. LeetCode--441--排列硬币

    问题描述: 你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整型的范围 ...

  9. Flex动画效果的用法--Resize

    Flex动画效果的用法--Resize FlexAdobeXML  <?xml version="1.0" encoding="utf-8"?> & ...

  10. 微信小程序 swiper 显示图片计数 当前/总数

    <view class="swiperContainer"> <swiper bindchange="swiperChange" autopl ...