使用angular 自定义fliter和constant替换数据的一些方法。

在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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容