AngularJs过滤器
Posted 老街_hehe
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJs过滤器相关的知识，希望对你有一定的参考价值。
AngularJS过滤器
AngularJS过滤器可用于转换数据：
过滤器 描述
lowercase 格式化字符串为小写
uppercase 格式化字符串为大写
currency 格式化数字为货币格式
orderBy 根据某个表达式排列数组
filter 从数组项中选择一个子集
date 日期格式化(date:"yyyy-MM-dd HH:mm:ss")
number 保留小数
limitTo 截取
过滤管道 |
表达式中添加过滤器
uppercase 过滤器将字符串格式化为大写：
<div ng-app="myApp" ng-controller="namesCtrl"> <p>{{sex | uppercase}}</p> <ul> <li ng-repeat="x in names"> {{x.name + "," +x.country}} </li> </ul> </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="namesController.js"></script>
angular.module("myApp",[]).controller("namesCtrl",function($scope){
$scope.names = [
{name:"Jani",country:"Norway"},
{name:"Hege",country:"Sweden"},
{name:"Kai",country:"Denmark"}
];
$scope.sex = "boy";
})
lowercase 过滤器将字符串格式化为小写：
currency 过滤器将数字转化为货币格式：
<div ng-app="myApp" ng-controller="namesCtrl"> <input type="text" ng-model="price"> <input type="text" ng-model="quantity"> <p>总价 = {{(quantity*price) | currency}}</p> <!--$138.00--> <p>{{sex | uppercase}}</p> <!--BOY--> <ul> <li ng-repeat="x in names"> {{x.name + "," +x.country}} </li> </ul> </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="namesController.js"></script>
向指令添加过滤器
过滤器可以通过一个管道字符|和一个过滤器添加到指令中，该过滤器后可以跟一个冒号和一个模型名称
orderBy(根据id升序排列)
<div ng-app="myApp" ng-controller="namesCtrl"> <input type="text" ng-model="price"> <input type="text" ng-model="quantity"> <p>总价 = {{(quantity*price) | currency}}</p> <!--$138.00--> <p>{{sex | uppercase}}</p> <!--BOY--> <ul> <li ng-repeat="x in names | orderBy:‘id‘"> {{(x.name | uppercase) + "," +x.country + "," + x.id}} </li> </ul> </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="namesController.js"></script>
angular.module("myApp",[]).controller("namesCtrl",function($scope){
$scope.names = [
{name:"Jani",country:"Norway",id:"3"},
{name:"Hege",country:"Sweden",id:"1"},
{name:"Kai",country:"Denmark",id:"2"}
];
$scope.sex = "boy";
$scope.price = "23.0";
$scope.quantity = "6";
})
orderBy(根据id倒序排列)
<div ng-app="myApp" ng-controller="namesCtrl"> <input type="text" ng-model="price"> <input type="text" ng-model="quantity"> <p>总价 = {{(quantity*price) | currency}}</p> <p>总价 = {{(quantity*price) | currency:"RMB ￥"}}</p> <!--$138.00--> <!--RMB ￥138.00--> <p>{{sex | uppercase}}</p> <!--BOY--> <ul> <li ng-repeat="x in names | orderBy:‘id‘:true"> {{(x.name | uppercase) + "," +x.country + "," + x.id}} </li> </ul> <!--自定义过滤器--> <p>{{msg | reverse}}</p> <!--频调乐音我酷--> </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="namesController.js"></script>
自定义过滤器
以下实例自定义一个过滤器reverse,将字符串反转：
<div ng-app="myApp" ng-controller="namesCtrl"> <input type="text" ng-model="price"> <input type="text" ng-model="quantity"> <p>总价 = {{(quantity*price) | currency}}</p> <p>总价 = {{(quantity*price) | currency:"RMB ￥"}}</p> <!--$138.00--> <!--RMB ￥138.00--> <p>{{sex | uppercase}}</p> <!--BOY--> <ul> <li ng-repeat="x in names | orderBy:‘id‘"> {{(x.name | uppercase) + "," +x.country + "," + x.id}} </li> </ul> <!--自定义过滤器--> <p>{{msg | reverse}}</p> <!--频调乐音我酷--> </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="namesController.js"></script>
var app = angular.module("myApp",[]); app.controller("namesCtrl",function($scope){ $scope.names = [ {name:"Jani",country:"Norway",id:"3"}, {name:"Hege",country:"Sweden",id:"1"}, {name:"Kai",country:"Denmark",id:"2"} ]; $scope.sex = "boy"; $scope.price = "23.0"; $scope.quantity = "6"; $scope.msg = "酷我音乐调频"; }) // 自定义过滤器reverse app.filter("reverse",function(){//可以注入依赖 return function (text){ return text.split("").reverse().join(""); } })
date格式化
<div ng-app="myApp" ng-controller="namesCtrl"> {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="namesController.js"></script>
<!--2017-03-22 13:52:25-->
number格式化(保留小数)
<div ng-app="myApp" ng-controller="namesCtrl"> {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} {{149016.1945000 | number:2}} <!--2017-03-22 13:52:25--> <!--149,016.19--> </div>
filter查找
从数组项中选择一个子集(查找id:3的行)
<div ng-app="myApp" ng-controller="namesCtrl"> {{ names | filter:{‘id‘:‘3‘} }} <!--[{"name":"Jani","country":"Norway","id":"3"}]--> </div> <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="namesController.js"></script>
var app = angular.module("myApp",[]); app.controller("namesCtrl",function($scope){ $scope.names = [ {name:"Jani",country:"Norway",id:"3"}, {name:"Hege",country:"Sweden",id:"1"}, {name:"Kai",country:"Denmark",id:"2"} ]; $scope.sex = "boy"; $scope.price = "23.0"; $scope.quantity = "6"; $scope.msg = "酷我音乐调频"; })
limitTo截取
<div ng-app="myApp" ng-controller="namesCtrl"> <!--从前面开始截取前6位--> {{"1234567890" | limitTo :6}} <!--从后面开始截取后6位--> {{"1234567890" | limitTo :-6}} </div>
以上是关于AngularJs过滤器的主要内容，如果未能解决你的问题，请参考以下文章