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