angular中常见过滤器
- 我们从后台请求的数据 有时候不是我们想要的格式
- 比如货币数字从后台获取过来就是一堆纯数字
- 但是货币数字通常是 按照规则用逗号分开并且数字前面有标识当前是哪种货币
- 过滤器的概念：angularjs为我们提供的处理数据格式的方式
- 过滤器的作用：将数据格式化我们想要的格式
- 过滤器的分类：内置过滤器 自定义过滤器
- 使用过滤器的语法：
- {{ 数据模型 | 过滤器的名字:过滤器的参数:多个参数以冒号隔开 }}
- 内置过滤器介绍
- currency 货币过滤器
- date 日期过滤器
- filter 过滤数据
- 模糊匹配：angularjs会去每一条数据中的每一个字段中去查找 有没有包含过滤条件的数据
- 精确匹配：angularjs会去每一条数据中的指定字段中去查找 有没有包含过滤条件的数据
- limitTo 限制
- 第一个参数:limit 限制的数量,可以为负数,从后往前开始限制
- 第二个参数:begin 从第几个开始限制
- orderBy 排序 orderBy:'字段' 默认是升序 orderBy:'-字段' 降序
- number 数字过滤器
- uppercase 大写字符过滤器
- lowercase 小写字符过滤器
- json 转化为json字符串
代码分析：
<body ng-app="myApp" ng-controller="demoCtrl">
<!-- 1.货币过滤器 -->
<p>{{ money | currency:"￥" }}</p>
<!-- 2.日期过滤器格式:yyyy年MM月dd日 HH时mm分ss秒 -->
<p>{{ time | date:"yyyy-mm-dd hh-mm-ss"}}</p>
<!-- 3.filter数据过滤-1 模糊匹配 -->
<ul ng-repeat="item in persons | filter:'孙悟空'" >
<li>{{item.name}} {{item.age}}</li>
</ul>
<!-- 4.filter数据过滤-1 精确匹配 -->
<ul ng-repeat="item in persons | filter: {name:'猪八戒'}" >
<li>{{item.name}} {{item.age}}</li>
</ul>
<!-- 5.limitTo限制过滤器 -->
<!-- 从下标为2的地方匹配，匹配两个字符 -->
<p>{{word | limitTo:2:2 }}</p>
<!-- 从倒数最后最二个下标匹配 -->
<p>{{word | limitTo:-2 }}</p>
<!-- 6.orderBy 排序 默认是升序 -->
<ul ng-repeat="item in persons" | orderBy:"age">
<li>{{item.age}} {{item.name}}</li>
</ul>
<!-- 7.orderBy 排序 倒序 -->
<ul ng-repeat="item in persons" | orderBy:"-age">
<li>{{item.age}} {{item.name}}</li>
</ul>
<!-- 8.number 数字过滤器 -->
<p>{{ num | number:2}}</p>
<!-- 9.转化为大写过滤器 -->
<p>{{ str | uppercase}}</p>
<!-- 10.转化为小写过滤器 -->
<p>{{ str | lowercase}}</p>
<!-- 11.转化为JSON对象 -->
<p>
<pre>{{persons|json}}</pre>
</p>
<script src="node_modules/angular/angular.js"></script>
<script>
angular.module('myApp',[])
.controller('demoCtrl',['$scope',function($scope){
$scope.money = 998;
$scope.time = new Date();
$scope.persons = [
{
name:'1孙悟空2',age : 500
},{
name:'1猪八戒2',age:250
},{
name:'沙僧',age:300
},{
name:'唐僧',age:100
}
];
$scope.word = "我是好人";
$scope.num = 1234567890987654;
$scope.str = "angular";
}])
</script>
</body>
angular自定义过滤器
- angularjs自身只是提供了一些常用的过滤器,在实际项目中,我们往往会遇到一些比较具体的需求,比如电话号码中间加*、单词首字母大写等等比较个性化的数据格式需求
- 语法：
- 如何定义自定义过滤器
模块对象.filter('自定义过滤器名字',[function(){ return function(要处理的数据,滤过器参数1,滤过器参数2,...){ // 具体处理数据的代码 return 处理后的数据; } }]) - 通过例子演示自定义过滤器的使用(首字母大写、电话号码加*)
代码分析：
<!-- 自定义手机号中间四位数转化为**** --> {{tel | telstar}} <!-- 自定义过滤器首字母转化为大写 a,b 是参数，我们暂不处理 --> {{Word | firstLetter:'a':'b'}} <script src="node_modules/angular/angular.js"></script> <script> angular.module("myApp",[]) .filter("telstar",function(){ //value接受表单中的值 return function(value){ //先截取前三个字符、替换中间的四个字符、拼接后面四个字符 return value.substr(0,3)+"****"+value.substr(7); } }) .filter("firstLetter",function(){ return function(value){ //取第一个字符转大写 return value.substr(0,1).toUpperCase()+value.substr(1); } }) .controller("demoCtrl",["$scope",function($scope){ $scope.tel="18010972573"; $scope.Word="angular"; }]) </script>
