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}};  //htmljs中控制台中的数组引出并排序;如果是英文就按字母排,汉字按首字母.数字就按大小;

 

添加符号

$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分钟 ssEEEE星期但是是英文的

 

搜索过滤器

$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 | 变量名}}  //通过变量名来寻找到自己定义的过滤器

 

 posted on 2017-06-17 23:18  IT-忐忑  阅读(262)  评论(0编辑  收藏  举报