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>
![](http://img.blog.csdn.net/20160602130112592?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
2.使用过滤器处理日期格式化问题
实例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>
相关文章推荐
- AngularJS Post 表单键值对格式
- Backbone vs AngularJS
- angularjs1.3.0源码解析之directive
- 通过终端调试 AngularJS 应用
- angular学习参考资料
- AngularJs-指令和控制器交互
- AngularJs Filter详解1-内置过滤器
- angularjs Select下拉选择宽
- AngularJS中的jQuery
- 如何监听Angularjs列表数据是否渲染完毕,配合jQuery操作DOM,指令的规范
- angularjsService
- “英雄之旅”见闻和小结----angular2系列(三)
- AngularJS之中级Route【二】(七)
- angularjs的mvvm
- Angular单页面应用架构
- Angular入门-module和service
- AngularJS 世界------Angularjs的模型(ng-model)
- Angularjs 2.0 学习备忘
- 关于AngularJS的一些基础总结
- AngularJS之Route(六)