angularjs-过滤器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularjs-过滤器相关的知识，希望对你有一定的参考价值。
#angularjs常用过滤器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/angular.min.js"></script> </head> <body> <div ng-app="app" ng-controller="ctrl"> 货币currency：{{999.99|currency:‘$‘:1}} <br /> 数字number：{{999.111|number:2}} <br /> 大写lowercase：{{"CXIONG"|lowercase}} <br /> 小写uppercase： {{"cxiong"|uppercase}} <br /> 截取字符limitTo：{{"cxiong"|limitTo:2:1}} <br /> 日期data：{{time|date:‘yyyy年MM月dd日 HH时mm分ss秒‘}} <br /> 排序orderBy：{{data|orderBy}} <br /> <!--filter精确匹配--> 过滤filter：{{data|filter:1:true}} <br /> </div> <script type="text/javascript"> var m=angular.module(‘app‘,[]); m.controller(‘ctrl‘,[‘$scope‘,function($scope){ $scope.time=new Date().getTime() $scope.data=[1,3,4,55,66,23,14,41] }]); </script> </body> </html>
#$filter和callee应用表格排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src=‘js/angular.min.js‘> </script>
<style type="text/css">
.ng-cloak{display:none;}
</style>
</head>
<body ng-app="hd" ng-cloak class="ng-cloak">
<div ng-controller="ctrl">
<table border="" cellspacing="" cellpadding="">
<tr>
<th ng-click="sort(‘name‘)">名称</th>
<th ng-click="sort(‘num‘)">数量</th>
<th ng-click="sort(‘price‘)">价格</th>
</tr>
<tr ng-repeat="d in data">
<td>{{d.name}}</td>
<td>{{d.num}}</td>
<td>{{d.price}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var m=angular.module(‘hd‘,[])
m.controller(‘ctrl‘,[‘$scope‘,‘$filter‘,function($scope,$filter){
$scope.data=[
{‘name‘:‘iphone6‘,‘num‘:150,‘price‘:3999},
{‘name‘:‘beats‘,‘num‘:100,‘price‘:999},
{‘name‘:‘iphone7‘,‘num‘:500,‘price‘:5999},
{‘name‘:‘ipad‘,‘num‘:250,‘price‘:1999}
]
var status=true
$scope.sort=function(field){
//arguments.callee 全局存放静态变量
if (arguments.callee[field]==‘undefine‘) {
arguments.callee[field]=true
}
arguments.callee[field]=!arguments.callee[field]
$scope.data=$filter(‘orderBy‘)($scope.data,field,arguments.callee[field])
}
}])
</script>
</body>
</html>以上是关于angularjs-过滤器的主要内容，如果未能解决你的问题，请参考以下文章