学习笔记-AngularJs（三）

学习笔记-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>

<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>。

转载于:https://www.cnblogs.com/wuxiaobin/p/4811756.html

学习笔记-AngularJs（三）相关推荐

学习笔记-AngularJs（十）
前面一直在说自定义指令,但是却一直没有一次系统地去了解,现在需要我们一起来学习如何去使用自定义指令,去丰富html标签.属性,实现多元化.多功能的标签(或是属性).辣么,啥是指令?要了解指令,首先需要 ...
菜鸟Vue学习笔记（三）
菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...
Java NIO 学习笔记（三）----Selector
目录: Java NIO 学习笔记(一)----概述,Channel/Buffer Java NIO 学习笔记(二)----聚集和分散,通道到通道 Java NIO 学习笔记(三)----Select ...
UFLDL深度学习笔记（三）无监督特征学习
UFLDL深度学习笔记 (三)无监督特征学习 1. 主题思路 "UFLDL 无监督特征学习"本节全称为自我学习与无监督特征学习,和前一节softmax回归很类似,所以本篇笔记会比较 ...
ASP.NET Core 2 学习笔记（三）中间件
原文:ASP.NET Core 2 学习笔记(三)中间件之前ASP.NET中使用的HTTP Modules及HTTP Handlers,在ASP.NET Core中已不复存在,取而代之的是Middl ...
OpenCV学习笔记（三十六）——Kalman滤波做运动目标跟踪 OpenCV学习笔记（三十七）——实用函数、系统函数、宏core OpenCV学习笔记（三十八）——显示当前FPS OpenC
OpenCV学习笔记(三十六)--Kalman滤波做运动目标跟踪 kalman滤波大家都很熟悉,其基本思想就是先不考虑输入信号和观测噪声的影响,得到状态变量和输出信号的估计值,再用输出信号的估计误差加 ...
OpenCV学习笔记（三十一）——让demo在他人电脑跑起来 OpenCV学习笔记（三十二）——制作静态库的demo，没有dll也能hold住 OpenCV学习笔记（三十三）——用haar特征训练自己
OpenCV学习笔记(三十一)--让demo在他人电脑跑起来这一节的内容感觉比较土鳖.这从来就是一个老生常谈的问题.学MFC的时候就知道这个事情了,那时候记得老师强调多次,如果写的demo想在人家那 ...
Windows x64内核学习笔记（三）—— SMEP SMAP
Windows x64内核学习笔记(三)-- SMEP & SMAP SMEP & SMAP 实验:构造IDT后门第一步:编译以下代码第二步:构造IDT后门第三步:运行程序第四 ...
软件调试学习笔记（三）—— 调试事件的处理
软件调试学习笔记(三)-- 调试事件的处理要点回顾调试事件的处理实验一:实现简单调试器(创建进程) 实验二:分析异常来源实验三:实现简单调试器(附加进程) 实验四:分析NtDebugActiv ...
Windows消息机制学习笔记（三）—— 消息的接收与分发
Windows消息机制学习笔记(三)-- 消息的接收与分发要点回顾消息循环消息队列消息的接收 GetMessage 实验1:理解GetMessage 第一步:编译并运行程序A 第二步:编译并运 ...

学习笔记-AngularJs（三）

学习笔记-AngularJs（三）相关推荐

最新文章

热门文章