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

在angular中，我们使用ajax向接口获取数据时，通常需要对从接口获取数据进行转换，例如在约定中，status:0代表着状态为上线，当我们从接口文档获取到数据status:0时，需要把它转换为“上线”两个字，这时候就需要用到angular的filter功能对数据进行转换。
过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上。例如获取一个数组中的元素，对数组中的元素进行替换等。下面简单的介绍也filter结合constant替换数据使用方法。

    

        {{x.name | replaceHello}}

    

第一句定义一个angular应用，名字为myApp,并且定义一个控制器:controller,名字为myAppCtrl

第二句使用ng-repeat循环输出指定次数的html元素。

然后使用过滤器对输出的数据进行过滤处理。x.name为要过滤的数据，replaceHello为过滤器名字：

    {{x.name | replaceHello}}

然后是js，给what附上数据：

如果不进行过滤，它的效果应该是这样的：

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

发现数据已经替换成功了。
下面附上所有代码

    
    





    

        {{x.name |replaceHello}}