Filter的用法
选择包含Filter后字符串的内容,如
<p> {{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | filter:'果' }}</p>
结果为:["苹果","蛇果"]
limitTo
截取字符串,如
<p> {{ "你是个好人" | limitTo:3 }}</p>
结果为:你是个
还可以倒过来截取,如
<p> {{ "你是个好人" | limitTo:-3 }}</p>
结果为:个好人
对于数组也可以:
<p> {{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | limitTo:3 }}</p>
结果为:["苹果","蛇果","栗子"]
number
加分隔符或截取小数点后的几位,如:
{{ 123456789 | number }}
<!-- 1,234,567,890 -->
{{ 1.234567 | number:2 }}
<!-- 1.23 -->
orderBy
倒序和顺序用最后的true 来确定,如:
{{ [{
'name': 'Ari',
'status': 'awake'
}, {
'name': 'Q',
'status': 'sleeping'
}, {
'name': 'Nate',
'status': 'awake'
}] | orderBy: 'name' }}
<!--
[
{"name":"Ari","status":"awake"},
{"name":"Nate","status":"awake"},
{"name":"Q","status":"sleeping"}
]
-->
倒序的话,设true
{{ [{
'name': 'Ari',
'status': 'awake'
}, {
'name': 'Q',
'status': 'sleeping'
}, {
'name': 'Nate',
'status': 'awake'
}] | orderBy:'name':true }}
<!--
[
{"name":"Q","status":"sleeping"},
{"name":"Nate","status":"awake"},
{"name":"Ari","status":"awake"}
]
-->
自定义Filter
我们现在自定义一个句首字母大写的Filter,代码如下:
JS文件:
angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input will be the string we pass in
if (input)
return input[0].toUpperCase() +
input.slice(1);
}
});
var myApp=angular.module("myApp",['myApp.filters'])
myApp.controller('FilterController', ['$scope', '$filter',
function($scope, $filter) {
$scope.lowercasename = $filter('lowercase')("HBR");
}]);
HTML文件
<html>
<head lang="en">
<meta charset="UTF-8">
<script
src="bower_components/angular/angular.js">
</script>
<script
src="js/filterlearning.js">
</script>
</head>
<body ng-app="myApp">
<div ng-controller="FilterController">
<p> {{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | filter:'果' }}</p>
<p> {{ "你是个好人" | limitTo:-3 }}</p>
<p> {{ ['苹果', '蛇果', '栗子', '葡萄', '香蕉', '柠檬'] | limitTo:3 }}</p>
<!-- Ginger loves dog treats -->
<p>{{ 'ginger loves dog treats' |lowercase| capitalize }}</p>
</div>
</body>
</html>