$scope–局部作用域
- scope. watch –监听数据变化（前文讲过）
scope. apply
在前文讲到，要实现数据变化，视图也能自动跟着变化需求。在原生JS的setTimeout方法中直接修改$scope.name，运行后该属性等到规定时间时，不会被改变。解决方案有两种：
(1)直接使用angularJs提供的$timeout服务；(2)在setTimeout定时器中，使用 scope. apply()方法，同样能够实现。
代码如下：<pre> <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("app",[]); app.controller("Aaa",Aaa); function Aaa($scope){ $scope.name="hello"; //方法一 /*$timeout(function(){ $scope.name="hi"; },2000);*/ setTimeout(function(){ //在原生JS的setTimeout方法中直接修改，运行结果的name值不会变成“hi” //$scope.name="hi"; //方法二 $scope.$apply(function(){ $scope.name="hi"; }) },2000); } </script> </head> <body> <div ng-controller="Aaa"> <p>{{name}}</p> </div> </body> </html> </pre>
scope.
apply(fn)方法可以监听处理函数内部的属性变化。一旦有变化，会影响相应视图。
相比较下，它的好处是可以在第三方库或原生JS的方法中都是可以直接来用的。
其实，在AngularJs和事件的源码中，也是调用
scope.
apply(fn)方法来实现的。
angular.module
用来创建模块，返回一个模块对象。
- controller –创建控制器，前文讲过。（一个模块对象可以创建多个控制器）
- run
<pre>
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.run(["$rootScope",function($rootScope){
$rootScope.name="hello";
}])s
</script>
</head>
<body>
<!--<!–div ng-controller="Aaa">–>
<p>{{name}}</p>
</div>-->
此时不需要写ng-controller指令就能解析
<p>{{name}}</p>
</body>
</html>
</pre>
run方法的作用在于初始化一些全局的数据，省略了创建控制器并在页面引入控制器指令等的操作。
注意：run方法只能有
rootScope全局作用域，没有局部作用域
scope。
filter过滤器
书写方式：
表达式中，在变量的右边加一个管道符号“|”（竖线），再写上过滤器。如下所示：<pre> <div ng-controller="Aaa"> <p>{{price | currency}}</p>//运行结果：$22,122.00 //修改货币的符号 <p>{{price | currency:"Y"}}</p> </div> </pre>传递参数
filter过滤器传递参数的方式：在过滤器后面+“:”(冒号)+参数，如上述代码所示。
如果要传多个参数，写法是：
<p>{{price | currency:"Y" : 二参 : 三参}}</p>内置的过滤器
- currency–将一串数字转为货币
- number–将一串数字转为文本格式。
<p>{{price | number}}</p><!--22,122-->
当这串数字有小数时，number过滤器默认会保留（截取）取3位小数。
若想设置保留小数的位数，可传递一个参数，代码如下：
<p>{{price | number:2}}</p><!--22,122.34--> - uppercase/lowercase –大小写转换
这两个过滤器没有什么参数可传。 - json –可以将json字符串格式化，使之像对象的格式一样分行显示。代码如下：
<pre>{{name | json }}</pre>，注意最好写在”<pre>“标签内，因为它是可以识别空格和换行的标签。 - limitTo – 对数组或字符串的截取
<p>{{name | limitTo:2 }}</p>//打印出“he” date
<p>{{time | date }}</p> //$scope.time= "34233332200";毫秒数，输出Feb 1, 1971
要想设置特定的日期格式，需要为date过滤器传递参数。angular为我们提供了许多date过滤器的参数，具体可查看官方文档。
<p>{{time | date: 'yyyy' }}</p>orderBy – 对数组进行排序
<pre> app.controller("Aaa",function($scope){ $scope.arrName=[ {color:"red",age:"20"}, {color:"green",age:"25"}, {color:"yellow",age:"16"}, {color:"blue",age:"30"} ]; } <div ng-controller="Aaa"> //此时是按照“color”对应值的字母从小到大排序 <p>{{arrName | orderBy: 'color'}}</p> //此时是按照“age”对应值的数字从小到大排序 <p>{{arrName | orderBy: 'age'}}</p> </div> </pre>
若想将”arrName”数组中的“age”属性从大到小排序，需要为orderBy过滤器添加第二个参数,代码如下：
<p>{{arrName | orderBy: 'age' : true }}</p>filter –过滤指定数据
<p>{{arrName | filter:"red"}}</p> //运行输出[{"color":"red","age":"20"}]
上述代码中，filter的参数只能针对键值，对键名是没用的
<p>{{arrName | filter:"l"}}</p> //运行输出[{"color":"yellow","age":"16"},{"color":"blue","age":"30"}]
如果想完全匹配指定的数据，需要设置第二个参数为true，代码如下：
<p>{{arrName | filter:"l": true}}</p> <!--运行输出[]-->
由于“arrName”中的键值没有是“l”的，所以过滤后输出是“[]”空数组。
过滤器扩展
- 可组合使用过滤器
<p>{{name | limitTo:2 |uppercase}}</p> <!--运行输出“HE”-->
- JS中使用过滤器
上文中使用过滤器是在html的表达式后面使用的。而在JS中使用过滤器是通过一种服务的方式来实现的:$filter。
注意：angular中的服务是需要通过依赖注入的方式注入进去。<pre> <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("app",[]); //注入过滤器服务 app.controller("Aaa",["$scope","$filter",function($scope,$filter){ $scope.name= $filter('uppercase')('hello'); //参数是在后面以逗号隔开后添加 $scope.price= $filter('number')('3423333.34988',2); }]) </script> </head> <body> <div ng-controller="Aaa"> <!-- 输出大写的“HELLO”--> <p>{{name}}</p> <!--输出“3,423,333.35”--> <p>{{price}}</p> </div> </body> </html> </pre>自定义过滤器
是通过angular.module方法下的filter来实现。<pre> <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script> <script type="text/javascript"> var app=angular.module("app",[]); //注入过滤器服务 app.controller("Aaa",["$scope","$filter",function($scope,$filter){ /*$scope.name="hello";*/ $scope.name=$filter("firstUpper")("great",2); }]) //自定义过滤器 app.filter("firstUpper",function(){ //此处的“str”是需要做过滤操作的属性值 //此处的num就是过滤器的第一个传入的参数 return function(str,num){ console.log(num);//打印出2 return str.charAt(0).toUpperCase()+str.substring(1); } }); </script> </head> <body> <div ng-controller="Aaa"> <!-- 输出“Hello”--> <!--<p>{{name | firstUpper}}</p> <p>{{name | firstUpper : 2 }}</p>--> <!-- 输出“Great”--> <p>{{name}}</p> </div> </body> </html> </pre>
1751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
