angular的过滤器

angular有一些自带的过滤器，今天我就来写一下。

首先还是先把导入一个angular插件，再在我们的js中把模块和控制台写上(别忘了在html中写入模块名和在body中写入控制台名，当然控制台名可以视情况而定写在哪)。

因为我们老用数组，所以先写一下截取数组长度的；先在控制台中写一个数组，再在html中用angular的写法写入；

 

截取数组长度

$scope.arr = [1,2,3,4,5,6,7];  //在js的控制台中创建数组

{{arr | limitTo:数组长度}};

 

排序

$scope.brr = ['b', 'l', 'a', 'c', 'e', 'h'];//在js的控制台中创建数组

{{brr | orderBy}};  //在html中将js中控制台中的数组引出并排序;如果是英文就按字母排,汉字按首字母.数字就按大小;

 

添加符号

$scope.a = 50; //在js的控制台中创建数值

{{a | currency:"￥"}}  //如果有需要钱币符号或特殊符号我们可以这么写

 

大写和小写

$scope.str = "dawdaJKNKawdBBJw"; //在js的控制台中写一个带有大写和小写字母的字符串

{{str | uppercase}}  //大写

{{str | lowercase}}  //小写

 

千分位

$scope.nub = 116516116;  //在js控制台中写一个长的数值

{{nub | number}}  //讲数值用千分位的方式分开

 

时间的过滤器

$scope.shijian = new Date().getTime();//在js控制台中获取一下时间戳

{{shijian | date:'yyyy-MM-dd hh:mm:ss EEEE'}} //yyyy年份 MM月份 dd日期 hh小时 mm分钟 ss秒 EEEE星期但是是英文的

 

搜索过滤器

$scope.crr = [{name: '土豆',price: 5,nbm: 0},

　　　　　　{name: '茄子',price: 6,nbm: 0},

　　　　　　 {name: '黄瓜',price: 8,nbm: 0}];//在js控制台中创建一个数据来用来搜索

<input type="text" ng-model="xx"/>

<ul>

　　<li ng-repeat="i in crr | filter:xx">{{i.name}}</li>

</ul>

在html中先创建一个文本框来获取一下要搜索的数据，再将数据从数据中导出后在依照搜索的内容显示和隐藏

 

如果你想自己来定义一个过滤器也是可以的

我先写一个让首字符大写的

$scope.str1='welcome to china';

app.filter('变量名',function(){

　　return function(input){

　　return input.replace(/\w+/g,function(s){

　　return s.charAt(0).toUpperCase()+s.substring(1);

})

{{str1 | 变量名}}  //通过变量名来寻找到自己定义的过滤器

 

转载于:https://www.cnblogs.com/Z-Xin/p/7041719.html