过滤服务$filter
在NG框架中对数据进行转换显示的小工具,能让页面中的显示内容呈现为不一样的结构
语法:{{任意内容 | 过滤器}}
(1)支持自定义
$filter提供四种过滤器
(1)纯数字| currency:'货币符号'
1、用于将内容转换为货币格式,默认转换为美元格式,即在数字前添加美元符号
2、:'...'可不写,若写则其中内容会放在|前面的内容之前
如 5599 | currency:'￥'; 显示为￥5599.00
(2)...| filter:'内容'
1、用于从之前中选择符合要求的内容,类似于输入提示功能
2、使用ng-repeat指令后接| filter:'内容',筛选时,ng-repeat指令中不能加track by $index;
3、内容为空表示都符合
(3)...|uppercase/lowercase
1、对内容进行大/小写转换
(4) ... | orderBy:'表达式'
1、根据表达式的值对内容进行排序
2、一般用于ng-repeat结构,不能添加'track by $index'
3、表达式的内容只能是ng-repeat语法中代表取出变量中的内容,并且只能直接写出该变量中的内容,如对象不能通过.的
方式取具体值,只能写变量,不能直接写数字和字符串,变量是
数值则按数字排序,是字符串则按字典排序
代码示例:
<html ng-app='app' ng-controller='main' >
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
<title ng-bind='mainTitle'></title>
<script src='js/angular.js'></script>
<script src='js/angular.route.min.js'></script>
<style>
</style>
</head>
<body >
<!-- |currency -->
<span>我的手机价格:</span><span>{{5799| currency:'货币符号' }}</span>
<!-- |filter -->
<input type="text" ng-model='in'>
<ul>
<!-- 筛选符合子集数组的内容 -->
<li ng-repeat='pname in pnames | filter:in'>{{pname | uppercase}}</li>
</ul>
<ul>
<li ng-repeat='info in infos | orderBy:"score"'>{{info.uname+":"+info.score}}</li>
</ul>
<script>
var app=new angular.module('app',[]);
app.controller('main',['$scope','$http',function($scope,$http){
$scope.mainTitle='过滤服务';
// $scope.in='';
$scope.pnames=['jeff','mike','lucy'];
$scope.infos=[{
uname:'jeff',
score:100
},{uname:'mike',
score:90},{uname:'mocy',
score:98},{uname:'jack',
score:90}]
}])
</script>
</body>
</html>
