AngularJS过滤器

AngularJS过滤器:

currency:转为货币格式。小数点保留2位。

filter:在数组中选择一个子集。

lowercase:转为小写。

orderBy:根据表达式排列数组。

uppercase:转为大写。

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

输出大小写示例:

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

名:<input type="text" ng-model="firstName">

姓:<input type="text" ng-model="lastName">

名:<div>{{ firstName | uppercase/lowercase }}</div>

</div>

<script>

 var app=angular.module('myApp',[]);

  app.controller('personCtrl',function($scope)

{  

$scope.firstName='Tom';

return $scope.firstName;

});

</script>

转为货币格式示例:

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

<input type="number" ng-model="quantity">

<input type="number" ng-model="price">

<div>总价:{{(quantity*price)| currency}}</div>

</div> 

向指令中添加过滤器;

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

  <ul>

     <li ng-repeat="x in names | orderBy:age">

        {{ x.name+''+x.age}}

    </li>

  <ul>

</div>


过滤输入:

通过管道字符串|和一个过滤器添加到指令中,该过滤器后跟冒号和一个模型名称:

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

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

  <ul>

     <li ng-repeat="x in names| filter:test|orderBy:age">

           {{ (x.name|uppercase)+","+x.age}}

     </li>

  </ul>

</div>

摘录自runoob.com。旨在通过自己的语言加深对AngularJS的学习、理解和记忆。

原文地址:https://www.cnblogs.com/professional-NET/p/4993577.html