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

AngularJs Filter详解2--自定义过滤器

2016-06-02 11:15 851 查看
在AngularJs中可以添加自定义过滤器,来过滤处理或格式化数据

实例1:

<div ng-app="myApp" ng-controller="myCtrl">
<p ng-repeat="x in items | arrayFilter">
{{x}}-----转换后:{{x |dateFormat}}
</p>
</div>
<script>
//AngularJs 自定义过滤器
//1.添加一个model,在model中定义一个过滤器
//2.<strong>注意 对于简单基本类型过滤器执行一次,如果是数组object类型的过滤器执行两次(暂时没有详细探究)</strong>
angular.module('common', []).filter('dateFormat', function () {
return function (input) {
console.info(input);
return input * 100;
}
}).filter('arrayFilter', function () {
return function (input) {
console.info(input);
return input;
}
});
var app = angular.module('myApp', ['common']);
app.controller('myCtrl', function ($scope) {
$scope.items = [1, 2, 3];
});
</script>


2.使用过滤器处理日期格式化问题

<div ng-app="myApp" ng-controller="myCtrl">
<p>
{{  '/Date(1464769470711)/' | dateFormat }}
</p>
</div>
<script>
//AngularJs 自定义过滤器
//1.添加一个model,在model中定义一个过滤器
angular.module('common', []).filter('dateFormat', function () {
return function (input) {
if (/Date/.test(input)) {
var result = input.match(/\d+/);
if (result != null && result.length > 0) {
var number = result[0];
console.info(number);
//转换成Date对象
console.info(parseInt(number));
var date = new Date(parseInt(number));
var str = date.getFullYear() + "年" + date.getMonth() + "月" + date.getDay() + "日";
console.info(str);
return str;
}
}
return '';
}
});
var app = angular.module('myApp', ['common']);
app.controller('myCtrl', function ($scope) {
});
</script>

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: