在angular中，我们使用ajax向接口获取数据时，通常需要对从接口获取数据进行转换，例如在约定中，status:0代表着状态为上线，当我们从接口文档获取到数据status:0时，需要把它转换为“上线”两个字，这时候就需要用到angular的filter功能对数据进行转换。
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上。例如获取一个数组中的元素，对数组中的元素进行替换等。下面简单的介绍也filter结合constant替换数据使用方法。
<body ng-app="myApp" ng-controller="myAppCtrl">
<div>
<div ng-repeat="x in what">
{{x.name | replaceHello}}<br/>
</div>
</div>
第一句定义一个angular应用，名字为myApp,并且定义一个控制器:controller,名字为myAppCtrl
<body ng-app="myApp" ng-controller="myAppCtrl">
第二句使用ng-repeat循环输出指定次数的html元素。
<div ng-repeat="x in what">
然后使用过滤器对输出的数据进行过滤处理。x.name为要过滤的数据，replaceHello为过滤器名字：
{{x.name | replaceHello}}<br/>
然后是js，给what附上数据：
<script>
var app = angular.module("myApp", []);
app.controller("myAppCtrl", ["$scope", function ($scope) {
$scope.what=[{name:'0',age:2},{name:'1',age:3}]
}]);
</script>
如果不进行过滤，它的效果应该是这样的：
image.png
然后我们对数据进行过滤，我想要的效果是，数据为0是我把他替换成‘zero’,数据为1时我把他替换成‘one’,所以我先使用angular.constant定义一个常量，常量名为type：
app.constant('type',{
0:'zero',
1:'one'
});
然后我们把他注入到angular过滤器,这里的replaceHello是上面写的过滤器名字，index是我们输入的数据。：
app.filter('replaceHello', function (type) {
return function (index) {
console.log(type);
return type.index
}
});
然后打开网页，发现一片空白，
后来发现，使用对象属性时，使用点表示法是无法通过变量访问到属性的。也就是，上面的type.index的index并不是 return function(index)里的index,它是type的一个未定义的属性，
所以在这里我们可以改用方括号的方法访问对象的数据，“方括号的语法主要优点是可以通过变量来访问属性，-js高程85页”，所以上面的代码return type.index改为
return type[index]
再打开网页：
image.png
发现数据已经替换成功了。
下面附上所有代码
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myAppCtrl">
<div>
<div ng-repeat="x in what">
{{x.name |replaceHello}}<br/>
</div>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.constant('type',{
0:'zero',
1:'one'
});
app.controller("myAppCtrl", ["$scope", function ($scope) {
$scope.what=[{name:'0',age:2},{name:'1',age:3}]
}]);
//自定义过滤器
app.filter('replaceHello', function (type) {
return function (index) {
console.log(type);
return type[index]
}
});
</script>
</body>
</html>
网友评论