Ich habe AngularJS systematisch studiert und festgestellt, dass einige Ideen von AngularJS dem Smart-Modul von PHP sehr ähnlich sind, wie z. B. Datenbindung und Filter. Wenn Sie mit Smarty vertraut sind, wird es Ihnen leichter fallen, AngularJS im Detail zu lernen. Freunde, die daran interessiert sind, können es gemeinsam lernen
Einführung filtern
Filter wird zum Formatieren von Daten verwendet.Grundlegender Prototyp von Filter („|“ ähnelt dem Pipe-Modus in Linux):
AngularJS integrierter Filter
AngularJS verfügt über einige integrierte Filter, die häufig verwendet werden. Schauen wir sie uns einzeln an.
currencyFilter (Währung):
Zweck: Währung formatieren
Methodenprototyp:
Verwendung:
{{ |. Währung}}
{{ . |. Währung:'￥'}}
{{ . |. Währung:'CHY￥':}}
{{ . |. Währung:undefiniert:0}}
Zweck: Datum formatieren
Methodenprototyp:
{{ '2015-05-20T03:56:16.887Z' |. date:"MM/dd/yyyy @ h:mma"}}
{{ 1432075948123 |. Datum: „MM/tt/jjjj @ h:mma“}}
{{ 1432075948123 |. Datum: „MM/tt/jjjj @ h:mma“: „UTC“}}
Zweck: Filterarray
Methodenprototyp:
Verwendung 1 (String als Parameterausdruck verwenden):
<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
<!-- 参数expression使用String，将全文搜索关键字 'a' -->
<div ng-repeat="u in myArr | filter:'a' ">
<p>Name:{{u.name}}</p>
<p>Age:{{u.age}}</p>
<br />
</div>
</div>Verwendung 2 (Parameterausdruck verwendet Funktion):
// 先在Controller中定义function: myFilter
$scope.myFilter = function (item) {
return item.age === ;
};
<div ng-repeat="u in myArr | filter:myFilter ">
<p>Name:{{u.name}}</p>
<p>Age:{{u.age}}</p>
<br />
</div>Verwendung 3 (Objekt für Parameterausdruck verwenden):
<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
<div ng-repeat="u in myArr | filter:{age: } ">
<p>Name:{{u.name}}</p>
<p>Age:{{u.age}}</p>
<br />
</div>
</div>Verwendung 4 (Komparator als wahr oder falsch angeben):
<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
Name:<input ng-model="yourName" />
<!-- 指定comparator为false或者undefined，即为默认值可不传，将以大小写不敏感的方式匹配任意内容 -->
<!-- 可以试试把下面代码的comparator为true，true即大小写及内容均需完全匹配 -->
<div ng-repeat="u in myArr | filter:{name:yourName}:false ">
<p>Name:{{u.name}}</p>
<p>Age:{{u.age}}</p>
<br />
</div>
</div>Verwendung 5 (Komparator als Funktion angeben):
// 先在Controller中定义function:myComparator, 此function将能匹配大小写不敏感的内容，但与comparator为false的情况不同的是，comparator必须匹配全文
$scope.myComparator = function (expected, actual) {
return angular.equals(expected.toLowerCase(), actual.toLowerCase());
}
<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
Name:<input ng-model="yourName" />
<div ng-repeat="u in myArr | filter:{name:yourName}:myComparator ">
<p>Name:{{u.name}}</p>
<p>Age:{{u.age}}</p>
<br />
</div>
</div>Methodenprototyp:
用法（将对象格式化成标准的JSON格式）：
limitToFilter（limitTo）：
方法原型：
用法（选取前N个记录）：
<div ng-init="myArr = [{name:'Tom', age:}, {name:'Tom Senior', age:}, {name:'May', age:}, {name:'Jack', age:}, {name:'Alice', age:}]">
<div ng-repeat="u in myArr | limitTo:">
<p>Name:{{u.name}}
<p>Age:{{u.age}}
</div>
</div>lowercaseFilter（lowercase）/uppercaseFilter（uppercase）：
方法原型：
用法：
China has joined the {{ "wto" | uppercase }}.
We all need {{ "MONEY" | lowercase }}.numberFilter（number）:
方法原型：
用法：
{{ "3456789" | number}}
<br />
{{ true | number}}
<br />
{{ 12345678 | number:1}}orderByFilter（orderBy）：
方法原型：
用法：
<div ng-init="myArr = [{name:'Tom', age:, deposit: }, {name:'Tom', age:, deposit: }, {name:'Tom Senior', age:, deposit: }, {name:'May', age:, deposit: }, {name:'Jack', age:, deposit:}, {name:'Alice', age:, deposit: }]">
<!--deposit前面的'-'表示deposit这列倒叙排序，默认为顺序排序
参数reverseOrder：true表示结果集倒叙显示-->
<div ng-repeat="u in myArr | orderBy:['name','-deposit']:true">
<p>Name:{{u.name}}</p>
<p>Deposit:{{u.deposit}}</p>
<p>Age:{{u.age}}</p>
<br />
</div>
</div>自定义Filter
和Directive一样，如果内建的Filter不能满足你的需求，你当然可以定义一个专属于你自己的Filter。我们来做一个自己的Filter：capitalize_as_you_want，该Filter会使你输入的字符串中的首字母、指定index位置字母以及指定的字母全部大写。
方法原型：
完整的示例代码：
<!DOCTYPE>
<html>
<head>
<script src="/Scripts/angular.js"></script>
<script type="text/javascript">
(function () {
var app = angular.module('ngCustomFilterTest', []);
app.filter('capitalize_as_you_want', function () {
return function (input, capitalize_index, specified_char) {
input = input || '';
var output = '';
var customCapIndex = capitalize_index || -;
var specifiedChar = specified_char || '';
for (var i = ; i < input.length; i++) {
// 首字母肯定是大写的， 指定的index的字母也大写
if (i === || i === customCapIndex) {
output += input[i].toUpperCase();
}
else {
// 指定的字母也大写
if (specified_char != '' && input[i] === specified_char) {
output += input[i].toUpperCase();
}
else {
output += input[i];
}
}
}
return output;
};
});
})();
</script>
</head>
<body ng-app="ngCustomFilterTest">
<input ng-model="yourinput" type="text">
<br />
Result: {{ yourinput | capitalize_as_you_want::'b' }}
</body>
</html>好了，本篇讲了AngularJS中的Filter，看完这篇后，我们可以利用好Filter非常方便的使数据能按我们的要求进行展示，从而使页面变得更生动。
