前 言
Android应用开发中，有一些功能虽然能够使用原生JS来实现，但是会比较的复杂，因此一些相应的框架应运而生了。框架相对于原生JS而言，从主观上来说，最大的改变就是代码大幅度的减少了。在使用上，也比较方便易懂。因此，框架一经诞生就广受欢迎。
在本章，就将详细介绍其中一种框架的使用----Angular JS。
AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
angularJS表达式
1、angularJS使用双大括号{{}}绑定表达式；用于将表达式的内容输出到页面中。
表达式中可以是文字、运算符、变量等，也可以在表达式中进行运算输出结果。
eg:<p>{{5+5+"angular"}}</p> //可以直接使用---10angular
如果angular.js 文件放在页面的下方在页面刷新的瞬间会看到{{}}表达式的原样。
所以使用ng-bind指令代替表达式
eg:<p ng-bind="5+5+‘angular‘"></p> //可以直接使用
angularJS的常用指令
AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。
1、ng-app：声明angularJS所管辖的区域。一般写在body或HTML标签上，原则上一个页面中只写一个
eg：<body ng-app=""></body >
2、ng-model 指令把元素值（比如输入域的值）绑定到应用程序的变量中。
eg： <input type="text" ng-model = "name" />
使用：<div ng-bind = "name + ‘123‘"></div>
<div >{{name + "hahahha"}}</div>
3、ng-bind：把应用程序中的变量中的值，输出到页面HTML视图中，可以与表达式{{}}互相替换
eg：<div ng-bind = "name"></div> -----<div>{{name}}</div>
4、ng-init：初始化angularJS应用程序中的变量值：
eg:<body ng-init = "name = ‘jredu‘"></body >
应用程序初始化时，name变量就赋有初值 实现对输入框的实时监控 原生JS
<body ng-app="" ???ng-init = "name = ‘jredu‘"> ???????<!--原生JS绑定input与div--> ???????<input type="text" name="" id="input" value="" /> ???????<div id="div"></div> ???????????????????<script type="text/javascript"> ???????//原生JS绑定input与div ???????var inputs= document.getElementById("input"); ???????var div = document.getElementById("div"); ???????inputs.onchange = function(){ ???????????div.innerHTML = inputs.value; ???????} ???</script> ???????</body ?>效果如下： Angular JS
<body ng-app="" ???ng-init = "name = ‘jredu‘"> ???????<!--Angular绑定input与div--> ???????<input type="text" ng-model = "name" /> ???????<div ng-bind = "name + ‘123‘"></div> ???????????<script src="JS/angular.js" type="text/javascript" charset="utf-8"></script></body>
效果图如下：
比较：
通过上述的两个例题，相信大家都能够非常直观的了解到两者之间的差异。
原生JS通过对DOM的操作来实现对输入内容的监听，相对而言比较麻烦，并且在读取内容时，也有一些小小的bug，下面的div在读取输入框内容时，鼠标必须在输入框外再点击一下时，div才会读取输入框里面的内容。
但是，在使用angular JS时，div时实时的读取输入框里面的内容的。这样就比较的方便，而且，这也是用户想要的结果。
另外，对编程员来说，代码也不是少了一点半点，我想，这是所有程序员的福音吧！！！
| 1. Angular JS中的过滤器 |
| 1.1 基础介绍 |
过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。
1、系统内置的过滤器
currency 将数字格式化为货币格式
filter 从数组项中选择一个子集。//后接的变量名不加引号
orderBy 根据某个表达式排列数组。//后接的变量名加引号 顺序
lowercase 格式化字符串为小写。
uppercase 格式化字符串为大写。
自定义过滤器的使用：
1、ng-repeat指令
<tr ng-repeat="item in classes | orderBy:‘score‘|filter:search|filterByName:name|filterByScore:scores">
2、<p >{{表达式 | 过滤器名称}}</p>
<p>{{123456|currency}}</p><p>{{"aBcdEf"|lowercase}}</p><p>{{"aBcdEf"|uppercase}}</p>效果图如下：
1.2ng-repeat命令
ng-repeat命令相当于for循环，一般用于表格中，可以将目标中的数据循环遍历进表格中，使用起来非常的方便。
案例：
//将数组中的值遍历进表各中
<tr ng-repeat="item in classes “> ???????????????<td>{{item.name}}</td> ???????????????<td>{{item.age}}</td> ???????????????<td>{{item.score}}</td></tr>
效果图如下：
同时，也可以使用orderBy 指令将数组中的值进行排序，例如按照年龄排序，按照成绩排序，代码如下
<tr ng-repeat="item in classes | orderBy ：‘score’“>
但是，值得注意的是，orderBy 指令进行的排序都是升序，如果想要降序排列，就得自己重新编写代码。这就牵扯到自定义过滤器了。
下面，我们就一起来了解下。
1.3通过实例来了解自定义过滤器的使用方法
实例：
<body ng-app="app"ng-controller="ctrl"> ???????????????<p>{{123456|currency}}</p> ???????<p>{{"aBcdEf"|lowercase}}</p> ???????<p>{{"aBcdEf"|uppercase}}</p> ???????????????????????请输入查询关键字：<input type="text"ng-model="search" /> ???????<br/> ???????请输入姓名查询：<input type="text"ng-model="name" /><br/> ???????请输入成绩查询：<input type="text"ng-model="scores" /> ???????<table width="400px"border="1"> ???????????<tr> ???????????????<th>姓名</th> ???????????????<th>年龄</th> ???????????????<th>成绩</th> ???????????</tr> ???????????<tr ng-repeat="item in classes | orderBy:‘score‘|filter:search|filterByName:name|filterByScore:scores"> ???????????????<td>{{item.name}}</td> ???????????????<td>{{item.age}}</td> ???????????????<td>{{item.score}}</td> ???????????</tr> ???????</table> ???????????????<h1>自定义过滤器</h1> ???????<p>{{"我显示不出来啦啦!"|showHello}}</p> ???????<p>{{"我显示不出来啦啦!"|reverse}}</p> ???????<p>{{12345678901|hideTel:5}}</p> ???????????</body> ???<script src="JS/angular.js" type="text/javascript" charset="utf-8"></script> ???<script type="text/javascript"> ?????????angular.module("app",[]) ???????.controller("ctrl",function($scope){ ???????????$scope.classes = [ ???????????????{name:"张三",age:"18",score:90}, ???????????????{name:"子麻",age:"18",score:91}, ???????????????{name:"麻子",age:"18",score:19}, ???????????????{name:"六子",age:"18",score:95}, ???????????????{name:"换个影子",age:"18",score:93}, ???????????] ???????}) ?????/* ????????????自定义实现根据姓名筛选数据的功能 ????????????实例： ???????????????请输入查询姓名：<input type="text"ng-model="name" /> ???????????????<tr ng-repeat="item in classes |filterByName:name"> ?????????????????????????* */ ???????.filter("filterByName",function(){ ???????????return function(item,search){//classes数组 ??、 ??input里的内容 ???????????????if(!search){ ???????????????????return item; ???????????????} ???????????????var arr = []; ???????????????for(var i=0; i<item.length; i++){ ???????????????????var index = item[i].name.indexOf(search); ???????????????????if (index >-1) { ???????????????????????arr.push(item[i]); ???????????????????} ???????????????} ???????????????return arr; ???????????????????????????} ???????}) ???????/* ?????????自定义实现根据成绩筛选数据的功能 ????????注意：成绩是number数据类型，不能使用indexOf()方法，要将其转为字符串 ???????????????????* */ ???????.filter("filterByScore",function(){ ???????????return function(item,search){ ???????????????????????????????var arr =[]; ???????????????if(!search) return item; ???????????????for(var i=0; i<item.length; i++){ ???????????????????item[i].score +="";//item[i].score是number数据类型，↓不能使用indexOf()方法，故将其转为字符串 ???????????????????var index = item[i].score.indexOf(search); ????????????????????if(index>-1){ ???????????????????????search == item[i].score; ???????????????????????arr.push(item[i]); ???????????????????} ???????????????} ???????????????return arr; ???????????} ???????}) ???</script>效果图如下：
Angular JS 基础应用--第一篇
原文地址：http://www.cnblogs.com/2502778498spw/p/7586976.html