过滤器:
<div>
<h3>过滤器种类分一下几种:</h3>
<span class="lead">
number | currency | filter | lowercase | uppercase | orderby
</span>
<hr/>
</div>
<!-- 过滤数字 -->
{{ 3125213128.38 | number:3}}
<br/>
{{1325364212421 | currency:'¥'}}
<br/>
{{'asdfafGAAaa' | lowercase}}
<br/>
{{'asdfafGAAaa' | uppercase}}
<hr/>
<span class="h3">
<!--过滤为数字-->
{{12345678 | number}}
<br/>
<!--四舍五入-->
{{1234.5678 | number:3}}
</span>
<br/>
<br/>
<span class="h3">
{{1234567 | currency}}
<br/>
{{1234567 | currency:'¥'}}
</span>
<br/>
<br/>
<span class="h3">
<!--格式化时间-->
{{myDate | date}}
<br/>
medium: {{myDate | date:'medium'}}
<br/>
short: {{myDate | date:'short'}}
<br/>
fullDate: {{myDate | date:'fullDate'}}
<br/>
longDate: {{myDate | date:'longDate'}}
<br/>
mediumDate: {{myDate | date:'mediumDate'}}
<br/>
mediumTime: {{myDate | date:'mediumTime'}}
</span>
<br/>
<br/>
<span class="h3">
<!--数组类型的过滤器-->
{{ [1,2,3,4,5,6,7,8] | limitTo:'-2'}}
<br/>
</span>
<br/>
<br/>
<span class="h3">
{{city}}
<br/>
<br/>
{{ city | filter:'北京'}}
<br/>
<br/>
{{ city | orderBy:'name'}}
</span>
<script>
angular.module('myApp',[])
.factory('myData',function(){
return {
city:[
{name:'1',py:'shandong'},
{name:'2',py:'beijing'},
{name:'5',py:'shanghai'},
{name:'4',py:'北京'}
]
}
})
//在控制器中使用过滤器
.controller('filterCtrl',function($scope,myData,$filter){
$scope.myDate = new Date();
$scope.city = myData.city;
var number1 = $filter('number')(12345678);
var jsonStr = $filter('json')($scope.city)
console.log($scope.city)
console.log('格式化后'+jsonStr)
console.log('格式化后'+number1)
})
</script>
自定义过滤器:
首先,还是要先在页面引入angularjs。
然后开始编写js代码,
1.注册控制器:
<script>
angular.module('myApp',[],function(<span style="font-family: Arial, Helvetica, sans-serif;">$controllerProvider</span><span style="font-family: Arial, Helvetica, sans-serif;">,$provide,$filterProvider){</span>
/*注册控制器*/
$controllerProvider.register('ctrlName', function ($scope,serviceName) {
$scope.type = '通过provider注册的控制器';
$scope.objs = serviceName;
});
</script>
不要忘记在
angular.module('myApp',[],function(){ }); 的function中传递参数。
2.创建服务:
在服务(service)中穿件一个数组,
/*创建服务*/
$provide.service('serviceName', function () {
return [
{name:'xiaoming1',age:18},
{name:'xiaoming2',age:28},
{name:'xiaoming3',age:38}
]
});
第一种写法,
/*注册过滤器*/
$filterProvider.register('filterName', function () {
return function (objs) {
var newResult = [];
angular.forEach(objs, function (obj) {
if(obj.age<30){
newResult.push(obj)
}
});
return newResult;
}
})
})
.filter('filterXm',function(){
return function (objs) {
var newResult = [];
angular.forEach(objs, function (obj) {
if(obj.name == 'xiaoming2'){
newResult.push(obj)
}
});
return newResult;
}
})
js的整体代码为:
<script>
angular.module('myApp',[],function($controllerProvider,$provide,$filterProvider){
/*注册控制器*/
$controllerProvider.register('ctrlName', function ($scope,serviceName) {
$scope.type = '通过provider注册的控制器';
$scope.objs = serviceName;
});
/*创建服务*/
$provide.service('serviceName', function () {
return [
{name:'xiaoming1',age:18},
{name:'xiaoming2',age:28},
{name:'xiaoming3',age:38}
]
});
/*注册过滤器*/
$filterProvider.register('filterName', function () {
return function (objs) {
var newResult = [];
angular.forEach(objs, function (obj) {
if(obj.age<30){
newResult.push(obj)
}
});
return newResult;
}
})
})
.filter('filterXm',function(){
return function (objs) {
var newResult = [];
angular.forEach(objs, function (obj) {
if(obj.name == 'xiaoming2'){
newResult.push(obj)
}
});
return newResult;
}
})
</script>
html页面代码:
<div ng-controller="ctrlName">
{{type}}
<br/>
{{objs}}
<ul class="list-group">
<li class="list-group-item" ng-repeat="obj in objs | filterName | filterXm">
{{obj.name+" , "+obj.age}}
</li>
</ul>
</div>
{{type}}表达式来测试一下创建的控制器,
因为在控制器中定义的$scope.objs = serviceName; 其中serviceName为 服务 的名称,$provide.service返回一个数组。
{{objs}}的结果为 service中返回的数组,
在ul中用
ng-repeat="obj in objs | filterName | filterXm"
来过滤输出,filterName过滤了age<30的,filterXmg过滤名字为 xiaoming2的,
结果为