在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>
如果不进行过滤,它的效果应该是这样的:
然后我们对数据进行过滤,我想要的效果是,数据为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]
再打开网页:
发现数据已经替换成功了。
下面附上所有代码
<!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>