您的位置：首页 > Web前端 > AngularJS

angularJS的过滤器

2017-05-10 10:51 148 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>angularJS的过滤器</title>
<script src="js/Angular.js"></script>
</head>
<body>
<div ng-app="filterApp" ng-controller="filterController">
<div>
<h4>实例：转换为大写</h4>
你的姓是：{{firstName | uppercase}}
</div>
<div>
<h4>实例：数字格式化为货币格式：</h4>
你今天一共花费了：{{num1*num2 | currency}}
</div>
<div>
<h4>实例：排序过滤：</h4>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{x.name}}　{{x.country}}
</li>
</ul>
<span style="color: red;">
注意： 排序过滤器为：orderBy 不要漏写By ，在后面的按照某个列排序列名需要使用'  '括起来，默认按照升序排序，如果想使用降序排休可以写成orderBy:'country':true
</span>
</div>
<div>
<h4>自定义过滤器：字符串反转并大写</h4>
{{firstName | reverse | uppercase}}
</div>

<div>
<h4>时间过滤器</h4>
{{1490161945000  | date:"yyyy-MM-dd HH:mm:ss"}}
</div>
<div>
<h4>filter查找</h4>
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'}
}}
</div>
<script>
var app = angular.module("filterApp",[]).controller("filterController",function($scope){
$scope.firstName="yilisob";
$scope.num1 = "1000";
$scope.num2 = "2";
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}
];
});
//自定义过滤器
app.filter("reverse",function(){
return function(text) {
return text.split("").reverse().join("");
}
})

</script>
</div>
<hr />
<div>
<h3>过滤器解释</h3>
AngularJS 　过滤器可用于转换数据：<br />
<span style="color: red;">
过滤器　　　　描述(格式)</span><br />
currency　　格式化数字为货币格式。{{ 250 | currency:"RMB ￥ " }}自定义格式化货币显示样式<br />
filter从　　　数组项中选择一个子集。<br />
lowercase　 格式化字符串为小写。<br />
orderBy　　 根据某个表达式排列数组。<br />
uppercase　 格式化字符串为大写。<br />
date　　　　时间格式化：{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}}<br />
number　　　数值格式化：{{149016.1945000 | number:2}}保留两位小数<br />
filter　　　filter查找<br />
limitTo　　截取{{"1234567890" | limitTo :6}}  从前面开始截取6位  {{"1234567890" | limitTo:-4}} // 从后面开始截取4位<br />
orderBy　　排序:orderBy:'id':true 按id降序排序  orderBy:'id'按id升序排序(默认)<br />
<br />
</div>

<div>
<h3>使用过滤器</h3>
过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。<br />
可同时添加多个过滤器，同样使用（|）隔开
</div>

<div>
<h3>自定义过滤器</h3>
使用应用程序app 的filter方法，第一个参数为过滤器名称，第二个为自定义过滤方法
app.filter('reverse', function(){

})
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  angularjs
相关文章推荐
新的分享
章节导航