分类导航
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsVueDojoJsonElectronNode.jsExpressXMLAjaxUnityReactFlexWeb前端微信小程序支付小程序百度小程序

《AngularJS权威教程》笔记（6-7）——表达式、过滤器

Angularjs   发布时间：2022-04-20  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了《AngularJS权威教程》笔记（6-7）——表达式、过滤器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

1. 表达式

用{{}}符号将一个变量绑定到$scope上的写法本质上就是一个表达式{{expression}}。当用$watch进行监听时，AngularJS会对表达式或者函数进行运算。

(1) 解析AngularJS表达式——$parse

AngularJS通过$parse这个内部服务来进行表达式的运算。这个过程允许我们访问定义在$scope上的原始javaScript数据和函数。

将$parse服注入到控制器中，然后调用它就可以实现手动解析表达式。下面这个例子就是在input中输入内容在下方复现的功能。

<div ng-app='myApp'> <div ng-controller="MyController"> <input type="text" ng-model='expr' placeholder="Enter an expression"> <h2>{{parseValue}}</h2> </div> </div>
angular.module('myApp',[])
.controller('MyController',function($scope,$parse){
  $scope.$watch('expr',function(newVal,oldVal,scope){
    if(newVal!==oldVal){
      //注意！！此处参数是‘expr’不是newVal，书上写错了，或者低版本可以用
      var parseFun=$parse('expr');
      $scope.parseValue=parseFun(scope);
    }
  });
});

(2) 插值字符串——$interpolate

AngularJS中，有手动运行模板编译的能力。例如，插值允许计入作用域上的某个条件实时更新文本字符串。需要在对象中注入$interpolate服务。

$interpolate服务可以接受三个函数，第一个参数必需。

参数名 类型 描述
text 字符串 一个包含字符插值标记的字符串
mustHaveExpression 布尔型 如果将这个参数设为true,当传入的字符串中不含有表达式时会返回null
trustedContext 字符串 AngularJS会对已经进行过字符插值操作的字符串通过$sec.getTrusted()方法进行严格的上下文转义

来看这个例子。{{previeText}}也就是textarea中的内部文本，可以把{{to}}当做一个变量来使用，并对文本的变化进行实时更新。 

 <div ng-app='myApp'> <div ng-controller="MyController"> <input type="email" ng-model='to' placeholder="Recipient"> <textarea ng-model="emailBody"></textarea> <pre>{{previewText}}</pre> </div> </div>
angular.module('myApp',$interpolate){
  $scope.$watch('emailBody',function(body){
    if(body){
      var template=$interpolate(body);
      $scope.previewText=template({to: $scope.to});
    }
  });
});

如果需要在文本中使用不同于{{}}的符号来标识表达式的开始和结束，可以在$interpolateProvider中配置。此处略过具体方法。

2. 过滤器

(1)简介及用法

过滤器用来格式化需要展示给用户的数据。Angular有内置的过滤器，同时也可以自定义。在HTML模板绑定符号{{}}内通过|符号来调用过滤器。

[1] HTML形式过滤器

例如，字符串转换成大写，可以使用过滤器{{name| uppercase}}。

以HTML形式使用过滤器时，如果需要传递参数给过滤器，只要在过滤器名字后面加冒号。如果有多个参数，在每个参数后面加入冒号。

例如，限制小数点后位数，写上:2可以将2作为参数传递。
{{123.456789 | number:2}}

[2] JS中的过滤器

在JavaScript中可以通过$filter来调用过滤器。如下例子，转为小写： 

<div ng-app='myApp'> <div ng-controller="MyController"> <input type="text" ng-model='inputContent'> <p>{{contentShow}}</p> </div> </div>
angular.module('myApp',$filter){
   $scope.$watch('inputContent',function(content){
     var filterFun=$filter('lowercase');
     $scope.contentShow=filterFun(content);
   });
 });

(2) 内置过滤器

[1] currency

将数值格式化为货币格式。例如：{{123 | currency}}
currency过滤器允许设置货币符号。默认情况采用客户端所处区域的货币符号。

[2] date

将日期格式化成需要格式。默认采用mediumDate格式。可以自定义。

<div ng-app='myApp'> <div ng-controller="MyController"> <p>{{today|date:'medium'}}</p> </div> </div>
angular.module('myApp',$filter){
  $scope.today = new Date();
});

上例得到的结果是：Mar 19,2018 4:39:26 PM。替换不同过滤器，得到以下结果。

1) 显示方式

<p>{{today|date:'medium'}}</p>      <!--Mar 19,2018 4:46:32 PM-->
<p>{{today|date:'short'}}</p>       <!--3/19/18 4:46 PM-->
<p>{{today|date:'fullDate'}}</p>    <!--Monday,March 19,2018-->
<p>{{today|date:'longDate'}}</p>    <!--March 19,2018-->
<p>{{today|date:'mediumDate'}}</p>  <!--Mar 19,2018-->
<p>{{today|date:'mediumTime'}}</p>  <!--4:46:32 PM-->
<p>{{today|date:'shortTime'}}</p>   <!--4:46 PM-->

2) 年格式化

<p>{{today|date:'yyyy'}}</p> <!--2018--> <p>{{today|date:'yy'}}</p> <!--18--> <p>{{today|date:'y'}}</p> <!--2018-->

3) 月格式化

<!-- 英文月份 --> <p>{{today|date:'MMMM'}}</p> <!--March--> <!-- 英文月份简写 --> <p>{{today|date:'MMM'}}</p> <!--Mar--> <!-- 数字月份 --> <p>{{today|date:'MM'}}</p> <!--03--> <!-- 一年中的第几个月份 --> <p>{{today|date:'M'}}</p> <!--3-->

4) 日期格式化

<!-- 数字日 --> <p>{{today|date:'dd'}}</p> <!--19--> <!-- 一个月中第几天 --> <p>{{today|date:'d'}}</p> <!--19--> <!-- 英文星期 --> <p>{{today|date:'EEEE'}}</p> <!--Monday--> <!-- 英文星期简写 --> <p>{{today|date:'EEE'}}</p> <!--Mon-->

5) 小时格式化

<!-- 24小时制数字小时 -->
<p>{{today|date:'HH'}}</p>  <!--17-->
<!-- 一天中第几个小时 -->
<p>{{today|date:'H'}}</p>   <!--17-->
<!-- 12小时制数字小时 -->
<p>{{today|date:'hh'}}</p>  <!--05-->
<!--上午或者下午的第几个小时-->
<p>{{today|date:'h'}}</p>   <!--5-->

6) 分钟格式化

<!-- 数字分钟数 -->
<p>{{today|date:'mm'}}</p> <!--05-->
<!-- 一小时中的第几分钟 -->
<p>{{today|date:'m'}}</p>  <!--5-->

7) 秒数格式化

<!-- 数字秒数 -->
<p>{{today|date:'ss'}}</p>   <!--08-->
<!-- 一小时中的第几秒 -->
<p>{{today|date:'m'}}</p>    <!--7-->
<!-- 毫秒数 -->
<p>{{today|date:'.sss'}}</p> <!--.623-->

8) 字符格式化

<!-- 上下午标识 -->
<p>{{today|date:'a'}}</p> <!--PM-->
<!-- 四位时区标识 -->
<p>{{today|date:'Z'}}</p> <!--+0800-->

9) 自定义示例

 <p>{{today|date:'MMMd,y'}}</p> <!--Mar19,2018--> <p>{{today|date:'EEEE,d,M'}}</p> <!--Monday,19,3--> <p>{{today|date:'hh:mm:ss.sss'}}</p> <!--05:12:21.907-->

[3] filter

filter过滤器可以从给定数组中选择一个子集，并生成一个新数组返回。

1) 参数1

filter这个过滤器的第一个参数可以是字符串、对象或者是一个用来从数组中选择元素的函数。

字符串

返回所有包含这个字符串的元素。若想返回不包含该字符串的元素，在参数前加！。

<p>{{['a','bcd','abc'] | filter:'a'}}</p>   <!-- ["a","abc"] -->
<p>{{['a','abc'] | filter:'!a'}}</p>  <!-- ["bcd"] -->
对象

将待过滤对象属性与对象中的同名属性比较，如果是字符串会判断是否包含该字符。如果需比较全部属性，将$当做键名。

<div ng-app='myApp'> <div ng-controller="MyController"> <p>{{ myObject| filter:{age: '18'} }}</p> <!-- [{"name":"Joyce","age":"18"},{"name":"Frank","age":"18"}] --> <p>{{ myObject| filter:{name: 'a'} }}</p> <!-- [{"name":"Frank",{"name":"Diana","age":"16"}] --> <p>{{ myObject| filter:{$: '6'} }}</p> <!-- [{"name":"Diana","age":"16"}] --> </div> </div>
angular.module('myApp',function($scope){
  $scope.myObject=[{
      name: 'Joyce',age: '18'
    },{
      name: 'Frank',{
      name: 'Diana',age: '16'
    }];
});
函数

对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。

<div ng-app='myApp'> <div ng-controller="MyController"> <p>{{ ['Amy','like','to','travel']| filter:isCapitalized }}</p> <!-- ["Amy"] --> </div> </div>
angular.module('myApp',function($scope){
  $scope.isCapitalized=function(str){
    return str[0]==str[0].toUpperCase();
  }
});

2) 参数2（optional）

true

用angular.equals(expected,actual)对两个值进行严格比较。

<p>{{['JaSon','AmY','JOE'] | filter:'amy':true}}</p> <!-- [] -->
false

进行不区分大小写的子字符串比较。（书上说是区分，实践后发现不区分true时会）

<p>{{['JaSon','JOE'] | filter:'amy':false}}</p> <!-- ["AmY"] -->
函数

运行这个函数，如果返回真值就接受这个元素。
如果两个参数都是函数的情况，似乎有个没有生效，看下面这个例子，不太明白为啥结果是：[“Amy”,”Travel”]。

<!doctype html> <html> <head> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <script src="/js/angular.min.js"></script> </head> <body> <div ng-app='myApp'> <div ng-controller="MyController"> <p>{{ ['Amy','Travel']| filter:isCapitalized:lengthShort }}</p> </div> </div> </body> <script> angular.module('myApp',[]) .controller('MyController',function($scope){ $scope.isCapitalized=function(str){ console.log('is'); return str[0]==str[0].toUpperCase(); } $scope.lengthShort=function(str){ console.log('short'); return str.length<5; } }); </script> </html>

[4] json

json过滤器可以将一个JSON或者JavaScript对象转换成字符串。这样的转换对调试非常有帮助，相当于JSON.stringify()
{{ {'name':'Joyce','age':'18'} | json}}
结果为：{ “name”: “Joyce”,“age”: “18” }

[5] limitTo

根据传入参数生成新的数组或字符串。

截取方式：

如果数值大于原长度，则返回原始字符串或者数组。

<p>{{ 'Hello World'| limitTo:20 }}</p> <!-- Hello World--> <p>{{ 'Hello World'| limitTo:5 }}</p> <!-- Hello --> <p>{{ 'Hello World'| limitTo:-5 }}</p> <!-- World --> <p>{{ ['Amy','Travel']| limitTo:2 }}</p> <!-- ["Amy","like"]--> <p>{{ ['Amy','Travel']| limitTo:-2 }}</p> <!-- ["to","Travel"] -->

[6] lowercase、uppercase

将字符串转为小写或者大写。

<p>{{ 'Hello World'| lowercase }}</p><!--hello world--> <p>{{ 'Hello World'| uppercase }}</p><!--HELLO WORLD-->

[7] number

将数字格式化为文本。第二个参数可选，控制小数点后的位数（四舍五入）。

<p>{{ 12345678.9| number }}</p> <!--12,345,678.9--> <p>{{ 12345678.9052| number:2 }}</p><!--12,678.91-->

[8] orderBy

对指定数组进行排序。第一个参数必需，第二个可选。
以下例子都用以下数据作为数据源。

$scope.myData=[
  {name:'Amy',score:100},{name:'Jason',score:80},{name:'zoe',score:90},{name:'Belly',];

1) 参数1

函数

该函数会被当做待排序对象的getter方法。

字符串

根据这个字符串进行数组的排序。可以传入+或者-来强制升序或降序。

<p>{{ myData | orderBy:'score' }}</p> <p>{{ myData | orderBy:'+score' }}</p> <p>{{ myData | orderBy:'-score' }}</p>

结果：
[{“name”:”Jason”,”score”:80},{“name”:”zoe”,”score”:90},{“name”:”Belly”,{“name”:”Amy”,”score”:100}]

[{“name”:”Jason”,”score”:100}]

[{“name”:”Amy”,”score”:100},{“name”:”Jason”,”score”:80}]

数组

根据数组序列的表达式进行排列。例如在score一致的情况下，就根据name排序：

<p>{{ myData | orderBy:'score' }}</p> <p>{{ myData | orderBy:['score','name'] }}</p>

结果：
[{“name”:”Jason”,”score”:100}]

2) 参数2（optional）

是否逆向，true: 逆向；false: 不逆向

<p>{{ myData | orderBy:'score' }}</p> <p>{{ myData | orderBy:'score':true }}</p> <p>{{ myData | orderBy:'-score':true }}</p> <p>{{ myData | orderBy:'score':false }}</p>

结果：
[{“name”:”Jason”,”score”:80}]

[{“name”:”Jason”,”score”:100}]

大佬总结

以上是大佬教程为你收集整理的《AngularJS权威教程》笔记（6-7）——表达式、过滤器全部内容，希望文章能够帮你解决《AngularJS权威教程》笔记（6-7）——表达式、过滤器所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的Angularjs相关文章
其他相关热搜词更多
JavaScript之正则表达式学习笔记