金沙糖果派对2015cc 7

浅析AngularJS Filter用法,angularjsfilter

系统的读书了一下angularjs,开掘angularjs的多少理念根php的模块smarty很像,譬如数据绑定,filter。借使对smarty相比较熟稔的话,学习angularjs会对比易于一点,那篇文章给大家介绍angularjs
filter用法详解,感兴趣的相爱的人齐声念书啊

Filter简介

Filter是用来格式化数据用的。

Filter的着力原型( ‘|’ 类似于Linux中的管道情势):

复制代码 代码如下:
{{ expression | filter }}

Filter能够被链式使用(即三番两次使用八个filter):

复制代码 代码如下:
{{ expression | filter1 | filter2 | … }}

Filter也可以钦点八个参数:

复制代码 代码如下:
{{ expression | filter:argument1:argument2:… }}

AngularJS内建的Filter

AngularJS内建了有的常用的Filter,我们逐个来看一下。

currencyFilter(currency):

用途:格式化货币

措施原型:

复制代码 代码如下:
function(amount, currencySymbol, fractionSize)

用法:

 {{  | currency}}  <!–将格式化为货币,暗许单位标记为 ‘$’,
小数默许位–>
 {{ . | currency:’¥’}} <!–将.格式化为货币,使用自定义单位标记为 ‘¥’,
小数默许位–>
 {{ . | currency:’CHY¥’:}} <!–将.格式化为货币,使用自定义单位标识为
‘CHY¥’, 小数钦赐位, 会施行四舍五入操作 –>
 {{ . | currency:undefined:0}} <!–将12.55格式改为货币,
不变单位标记, 小数部分将四舍五入 –>

dateFilter(date):

用途:格式化日期

主意原型:

复制代码 代码如下:
function(date, format, timezone)

用法:

<!–使用ISO规范日期格式 –>
{{ ‘2015-05-20T03:56:16.887Z’ | date:”MM/dd/yyyy @ h:mma”}}
<!–使用13位(单位:毫秒)时间戳 –>
{{ 1432075948123 | date:”MM/dd/yyyy @ h:mma”}}
<!–指定timezone为UTC –>
{{ 1432075948123 | date:”MM/dd/yyyy @ h:mma”:”UTC”}}

filterFilter(filter):

用途:过滤数组

艺术原型:

复制代码 代码如下:
function(array, expression, comparator)

用法1(参数expression使用String):

 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <!-- 参数expression使用String,将全文搜索关键字 'a' -->
   <div ng-repeat="u in myArr | filter:'a' ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

用法2(参数expression使用function):

 // 先在Controller中定义function: myFilter
 $scope.myFilter = function (item) {
   return item.age === ;
 };
 <div ng-repeat="u in myArr | filter:myFilter ">
   <p>Name:{{u.name}}</p>
   <p>Age:{{u.age}}</p>
   <br />
 </div>

用法3(参数expression使用object):

 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <div ng-repeat="u in myArr | filter:{age: } ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

用法4(指定comparator为true或false):

 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   Name:<input ng-model="yourName" />
   <!-- 指定comparator为false或者undefined,即为默认值可不传,将以大小写不敏感的方式匹配任意内容 -->
   <!-- 可以试试把下面代码的comparator为true,true即大小写及内容均需完全匹配 -->
   <div ng-repeat="u in myArr | filter:{name:yourName}:false ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

用法5(指定comparator为function):

// 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容,但与comparator为false的情况不同的是,comparator必须匹配全文
 $scope.myComparator = function (expected, actual) {
   return angular.equals(expected.toLowerCase(), actual.toLowerCase());
 }
 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   Name:<input ng-model="yourName" />
   <div ng-repeat="u in myArr | filter:{name:yourName}:myComparator ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

jsonFilter(json):

办法原型:

复制代码 代码如下:
function(object, spacing)

用法(将目的格式化成正规的JSON格式):

复制代码 代码如下:
{{ {name:’Jack’, age: 21} | json}}

limitToFilter(limitTo):

措施原型:

复制代码 代码如下:
function(input, limit)

用法(选取前N个记录):

 <div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
   <div ng-repeat="u in myArr | limitTo:">
     <p>Name:{{u.name}}
     <p>Age:{{u.age}}
   </div>
 </div>

lowercaseFilter(lowercase)/uppercaseFilter(uppercase):

办法原型:

复制代码 代码如下:
function(string)

用法:

China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.

numberFilter(number):

艺术原型:

复制代码 代码如下:
function(number, fractionSize)

用法:

{{ "3456789" | number}}
<br />
{{ true | number}}
<br />
{{ 12345678 | number:1}}

orderByFilter(orderBy):

措施原型:

复制代码 代码如下:
function(array, sortPredicate, reverseOrder)

用法:

 <div ng-init="myArr = [{name:'Tom', age:, deposit: }, {name:'Tom', age:, deposit: }, {name:'Tom Senior', age:, deposit: }, {name:'May', age:, deposit: }, {name:'Jack', age:, deposit:}, {name:'Alice', age:, deposit: }]">
   <!--deposit前面的'-'表示deposit这列倒叙排序,默认为顺序排序
   参数reverseOrder:true表示结果集倒叙显示-->
   <div ng-repeat="u in myArr | orderBy:['name','-deposit']:true">
     <p>Name:{{u.name}}</p>
     <p>Deposit:{{u.deposit}}</p>
     <p>Age:{{u.age}}</p>
     <br />
   </div>
 </div>

自定义Filter

和Directive一样,假设内建的Filter不能满意你的须要,你当然可以定义叁个专项于您协和的Filter。我们来做几个要好的Filter:capitalize_as_you_want,该Filter会使您输入的字符串中的首字母、钦定index地点字母以及钦定的字母全体大写。

方法原型:

复制代码 代码如下:
function (input, capitalize_index, specified_char)

总体的以身作则代码:

<!DOCTYPE>
 <html>
 <head>
   <script src="/Scripts/angular.js"></script>
   <script type="text/javascript">
     (function () {
       var app = angular.module('ngCustomFilterTest', []);
       app.filter('capitalize_as_you_want', function () {
         return function (input, capitalize_index, specified_char) {
           input = input || '';
           var output = '';
           var customCapIndex = capitalize_index || -;
           var specifiedChar = specified_char || '';
           for (var i = ; i < input.length; i++) {
             // 首字母肯定是大写的, 指定的index的字母也大写
             if (i === || i === customCapIndex) {
               output += input[i].toUpperCase();
             }
             else {
               // 指定的字母也大写
               if (specified_char != '' && input[i] === specified_char) {
                 output += input[i].toUpperCase();
               }
               else {
                 output += input[i];
               }
             }
           }
           return output;
         };
       });
     })();
   </script>
 </head>
 <body ng-app="ngCustomFilterTest">
   <input ng-model="yourinput" type="text">
   <br />
   Result: {{ yourinput | capitalize_as_you_want::'b' }}
 </body>
 </html>

好了,本篇讲了AngularJS中的Filter,看完那篇后,咱们得以行使好Filter极其便利的使数码能按大家的渴求开展展现,进而使页面变得更活泼。

系统的求学了一下angularjs,开采angularjs的有些观念根php的模块smarty很像,举个例子数据绑定,filter。纵然对smarty比较熟谙的话,学习angularjs会比较便于一点,这篇小说给大家介绍angularjs
filter用法详解,感兴趣的意中人共同读书啊

简述ANGULAR中CONSTANT和$FILTER的用法

你大概感兴趣的稿子:

  • 详解AngularJS Filter(过滤器)用法

Filter用法,angularjsfilter
系统的就学了一下angularjs,开掘angularjs的有一点观念根php的模块smarty很像,举例数据绑定,filter。假设对…

Filter简介

背景介绍

背景介绍

angular是如何,这里不再陈说。

constant,能够算作angular的大局数据,想要使用的话,只供给在调节器注入就可以。

$filter,angular的过滤器,假使想要在调整器里面使用,也是流入,然后调用,而html中的数据过滤,直接键入过滤器名称和对应值就能够。

Filter是用来格式化数据用的。

Filter简介

Filter是用来格式化数据用的。

Filter的主导原型( ‘|’ 类似于Linux中的管道形式):

{{ expression |filter}}

Filter可以被链式使用(即接二连三使用五个filter):

{{ expression| filter1 |filter2| … }}

Filter也能够钦赐多个参数:

{{ expression |filter:argument1:argument2:… }}

知识剖判

Filter的主干原型( ‘|’ 类似于Linux中的管道情势):

AngularJS内建的Filter

AngularJS内建了一部分常用的Filter:

currencyFilter(currency):

用途:格式化货币

措施原型:

function(amount, currencySymbol, fractionSize)

用法:

{{ 12 | currency}}    将12格式化为货币,暗中认可单位标识为 $, 小数暗中认可2位

{{ 12.45 | currency:’¥’}}    将12.45格式化为货币,使用自定义单位标识为
‘¥’, 小数暗许2位

{{ 12.45 | currency:’CHY¥’:1}}  
 将12.45格式化为货币,使用自定义单位标识为 ‘CHY¥’, 小数钦定1位,
会试行四舍五入操作

{{ 12.55 | currency:undefined:0}}    将12.55格式成为货币,
不改造单位标记, 小数部分将四舍五入

dateFilter(date):

用途:格式化日期

形式原型:

function(date, format, timezone)

用法:

动用ISO规范日期格式

{{ ‘2015-05-20T03:56:16.887Z’ | date:”MM/dd/yyyy @ h:mma”}}

使用13位(单位:毫秒)时间戳

{{ 1432075948123 | date:”MM/dd/yyyy @ h:mma”}}

指定timezone为UTC

{{ 1432075948123 | date:”MM/dd/yyyy @ h:mma”:”UTC”}}

filterFilter(filter):

用途:过滤数组

艺术原型:

function(array, expression, comparator)

用法1(参数expression使用String):

金沙糖果派对2015cc 1

用法2(参数expression使用function):

金沙糖果派对2015cc 2

用法3(参数expression使用object):

金沙糖果派对2015cc 3

用法4(指定comparator为true或false):

金沙糖果派对2015cc 4

用法5(指定comparator为function):

金沙糖果派对2015cc 5

jsonFilter(json):

办法原型:

function(object, spacing)

用法(将指标格式化成规范的JSON格式):

{{ {name:’Jack’, age:21} | json}}

limitToFilter(limitTo):

办法原型:

function(input, limit)

用法(选取前N个记录):

金沙糖果派对2015cc 6

lowercaseFilter(lowercase)/uppercaseFilter(uppercase):

主意原型:

function(string)

用法:

China has joined the {{  “wto”  |  uppercase  }}. We all need {{“MONEY”|
lowercase }}.

numberFilter(number):

艺术原型:

function(number, fractionSize)

用法:

{{“3456789″| number}}

<br/>

{{true|number}}

<br/>

{{12345678| number:1}}

orderByFilter(orderBy):

办法原型:

function(array, sortPredicate, reverseOrder)

用法:

金沙糖果派对2015cc 7

constant:

每当搜索constant时候,总会连带出现value的验证。

两岸都得以视作全局变量使用,可是有两点分歧:

value不能在config里注入,但是constant能够。

value能够修改,可是constant不可以修改,一般间接用constant配置部分急需平常采纳的多寡。

下边是粗略的运用例子:

angular.module(‘myApp’, [])

.constant(‘apiKey’,’123123123′)

.value(‘FBid’,’231231231′)

.controller(‘myController’,function($scope,apiKey,FBid){

$scope.a = apiKey;

$scope.b = FBid;

})

.config(function(apiKey) {

// 在这边apiKey将被赋值为123123123// 就如上边安装的那么

})

.config(function(FBid) {

// 那将抛出二个荒唐,未知的provider: FBid

// 因为在config函数内部相当小概访问这几个值

});

复制代码 代码如下:

自定义Filter

和Directive一样,借使内建的Filter不能够满意你的急需,你当然可以定义二个直属于你协和的Filter。大家来做三个投机的Filter:capitalize_as_you_want,该Filter会让你输入的字符串中的首字母、钦命index地点字母以及钦命的假名全部大写。

情势原型:

function(input, capitalize_index, specified_char)

Filter

Filter是用来格式化数据用的。

Filter的主干原型( ‘|’ 类似于Linux中的管道情势):

{{ expression | filter }}

Filter能够被链式使用(即再而三使用五个filter):

{{ expression | filter1 | filter2 | … }}

Filter也足以钦定多个参数:

{{expression|filter:argument1:argument2:…}}

AngularJS内建的Filter

AngularJS内建了有的常用的Filter,我们每个来看一下。

currencyFilter(currency):

用途:格式化货币

措施原型:

function(amount, currencySymbol, fractionSize)

用法

{{ 12 | currency}}  //将12格式化为货币,暗中认可单位标记为 ‘, 小数暗中认可2位

{{ 12.45 | currency:’¥’}}   
//将12.45格式化为货币,使用自定义单位标识为 ‘¥’, 小数默许2位

{{ 12.45 | currency:’CHY¥’:1}} 
//将12.45格式化为货币,使用自定义单位标识为 ‘CHY¥’, 小数钦定1位,
会施行四舍五入操作

{{ 12.55 | currency:undefined:0}}  //将12.55格式改为货币,
不更换单位标记, 小数部分将四舍五入

dateFilter(date):

用途:格式化日期

艺术原型:

function(date, format, timezone)

用法

{{ ‘二〇一六-05-20T03:56:16.887Z’ | date:”MM/dd/yyyy @ h:mma”}} 
//使用ISO标准日期格式

{{ 1432075948123 | date:”MM/dd/yyyy @ h:mma”}} 
//使用13位(单位:毫秒)时间戳

{{ 1432075948123 | date:”MM/dd/yyyy @ h:mma”:”UTC”}} 
//指定timezone为UTC

jsonFilter(json):

措施原型:

function(object, spacing)

用法(将目的格式化成正规的JSON格式):

{{ {name:’Jack’, age:21} | json}}

自定义Filter

和Directive同样,如若内建的Filter无法知足你的急需,你当然能够定义三个直属于您和煦的Filter。大家来做叁个团结的Filter:capitalize_as_you_want,该Filter会使您输入的字符串中的首字母、钦点index地方字母以及钦赐的字母全部大写。

function(input, capitalize_index, specified_char)

越多详细消息能够参见官方文书档案 这里

{{ expression | filter }}

总体的亲自去做:

编码实战

见最下录制↓

Filter能够被链式使用(即延续使用多个filter):

demo点击

越来越多商量

为啥过滤器没有要求引进就可以直接采取?

复制代码 代码如下:

PPT点击

参谋资料

AngularJS
constant和value

AngularJS的Filter用法详解

录像链接:

ppt链接:

{{ expression | filter1 | filter2 | … }}

视频点击

Filter也足以钦定多个参数:

参谋资料

AngularJS官方文书档案:https://docs.angularjs.org/guide/filter

CodeSchool快速入门录像:http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

Fun with AngularJS
filter:http://sarahbranon.com/post/69604997957/fun-with-angularjs-filters-part-1-the-filter

复制代码 代码如下:

{{ expression | filter:argument1:argument2:… }}

AngularJS内建的Filter

AngularJS内建了有的常用的Filter,大家一一来看一下。

currencyFilter(currency):

用途:格式化货币

措施原型:

复制代码 代码如下:

function(amount, currencySymbol, fractionSize)

用法:

 {{  | currency}}  <!–将格式化为货币,默许单位标记为 ‘$’,
小数暗许位–>
 {{ . | currency:’¥’}} <!–将.格式化为货币,使用自定义单位标识为 ‘¥’,
小数暗中认可位–>
 {{ . | currency:’CHY¥’:}} <!–将.格式化为货币,使用自定义单位标记为
‘CHY¥’, 小数钦命位, 会实行四舍五入操作 –>
 {{ . | currency:undefined:0}} <!–将12.55格式变成货币,
不更改单位标记, 小数部分将四舍五入 –>

admin

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注