AngularJS过滤器

[b]AngularJS过滤器[/b]

过滤器可以使用一个管道字符（|）添加到表达式和指令中。

uppercase(变为大写):

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

lowercase(变为大写):

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

currency 过滤器将数字格式化为货币格式：

<div ng-app="myApp" ng-controller="costCtrl">

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
$scope.quantity = 1;
$scope.price = 9.99;
});
</script>

orderby(排序):

<div ng-app="myApp" ng-controller="namesCtrl">

<p>循环对象:</p>
<ul>
<li ng-repeat="x in names | orderBy:'name'">
{{ x.name + ', ' + x.country }}
</li>
</ul>

</div>

<script >
var app =  angular.module("myApp", []);
app.controller('namesCtrl', function($scope){
$scope.names = [
{name:"longjiang1",country:"３"},
{name:"longjiang2",country:"１"},
{name:"longjiang3",country:"２"}
];
});
</script>

过滤输入

输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

filter 过滤器从数组中选择一个子集：

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
<li ng-repeat="x in names | filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>

</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
</script>