1.内置过滤器 （1）货币过滤器 currency <span ng-bind="price | currency:'人民币￥'"></span> （2）日期时间过滤器 <span ng-bind="date | date:'yyyy年MM月dd日 hh:mm:ss'"></span> （3）json过滤器 <span ng-bind="users|json"></span> （4）filter 过滤输出（从数组项中选择一个子集） $scope.names = [ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; <input type="text" ng-model="test"> <li ng-repeat="x in names | filter:test"></li> （5）lowercase格式化字符串为小写 uppercase格式化字符串为大写 <li ng-repeat="x in names"> {{ (x.name | uppercase) + ', ' + x.country }} </li> （6）orderBy 根据某个表达式排列数组 <li ng-repeat="x in names | orderBy:'country'"></li>2.自定义过滤器结构： {{待过滤数据 | 过滤器名：参数1：参数2：参数3.....}} app.filter('过滤器名', function () { return function (待过滤数据, 参数....) { ...... return 已过滤数据; }Demo1：筛选出某个数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<!-- 这里是使用angularjs内置的filter 筛选出苹果-->
<ul>
<li ng-repeat="x in products | filter:'苹果'">{{x.name}}</li>
</ul>
<!-- 这里使用自定filterprice 筛选出价格小于9的水果名字 -->
<ul>
<li ng-repeat="x in products | filterprice:9">{{x.name}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("myCtrl", ["$scope", function ($scope) {
$scope.products = [
{name: "苹果", price: "5", counts: 24},
{name: "香蕉", price: "2.5", counts: 27},
{name: "橘子", price: "6", counts: 28},
{name: "葡萄", price: "10", counts: 23}
];
}]);
//筛选出价格小于某个数的水果
app.filter('filterprice', function () {
return function (e,price) {
var newarr = [];
angular.forEach(e, function(val,index){
if(val.price < price){
newarr.push(val);
}
});
return newarr;
}
})
</script>
</body>
</html>
Demo2：自定义百分比转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
原始数据<input type="text" ng-model="input">
<p>转换结果：{{input | percent:100:1}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("myCtrl", ["$scope", function ($scope) {
}]);
// 转为百分比
app.filter('percent', function () {
return function (numerator, denominator) {//参数传入：分子和分母
if (numerator === '' || numerator === undefined || numerator === 'unknown') { // 无数据
return '--';
}
if (denominator !== undefined && denominator !== 0) {
return (numerator / denominator * 100) + '%';
}
};
});
</script>
</body>
</html>
运行结果：![]()
|
|
收藏
淘帖
踩
