AngularJs(四)--过滤器& $apply & $run
来源：互联网 发布：log4j打印sql 编辑：程序博客网 时间：2024/06/06 04:22
$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>
相比较下，它的好处是可以在第三方库或原生JS的方法中都是可以直接来用的。
其实，在AngularJs和事件的源码中，也是调用
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方法只能有
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过滤器添加第二个参数,代码如下：</br> `<p>{{arrName | orderBy: 'age' : true }}</p>` - filter --过滤指定数据</br> `<p>{{arrName | filter:"red"}}</p> //运行输出[{"color":"red","age":"20"}]` </br> <font color="red"> 上述代码中，filter的参数只能针对键值，对键名是没用的。</br> </font> `<p>{{arrName | filter:"l"}}</p> //运行输出[{"color":"yellow","age":"16"},{"color":"blue","age":"30"}]` </br>如果想完全匹配指定的数据，需要设置第二个参数为true，代码如下：</br>`<p>{{arrName | filter:"l": true}}</p> <!--运行输出[]-->`</br>由于“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>
- AngularJs(四)--过滤器& $apply & $run
- AngularJs $apply
- angularJs $apply
- angularjs 过滤器
- AngularJs 过滤器
- AngularJS--过滤器
- AngularJs过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- AngularJs 过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- angularjs-过滤器
- AngularJS 过滤器
- AngularJs过滤器
- angularJS 过滤器
- AngularJS 过滤器
- Codeforces Round #450 (Div. 2)
- DevExpress循环获取每一行数据
- spring集成RMI
- RatingBar适配及SetRating不起作用
- 报错修改：Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web
- AngularJs(四)--过滤器& $apply & $run
- 流程图
- 货币转换 A
- 20171215
- markdown 语法
- 1020. 月饼 (25) PAT C++实现
- 分布式基础_集群、分布式环境下5种session处理策略
- [转] winrar5.50去广告教程（仅供学习使用）[2017.12测试可用]
- Centos6.5 安装 RabbitMQ3.6.1
