angularjs自定义过滤器编写及技巧

谈起angularjs中的过滤器，这是一个非常实用的功能。它可以将一些数据按照指定的格式或指定的内容输出在页面上，其语法也十分方便，避免了页面中大量出现ng-show等控制语句，增加页面代码可读性。为了照顾初学angularjs的童鞋，我们先简单介绍一下自定义过滤器的语法。

语法介绍

首先我们要知道angularjs的开发模式，它是采用模块化开发模式，也就是说一个基于angularjs的应用程序是可以由诸多angular模块组装起来的。也就是说angular应用是以模块为最小单位的。自定义过滤器需要绑定至模块。其语法为：

var app = angular.module(moduleName, [])
// 自定义过滤器
app.filter(filterName, function (service1,service2,...) {
  return function(value, args) {
    var result = ''
    // 处理逻辑
    ...
    return result
  }
})

在页面上使用过滤器时，语法为：

<span>{{data | filterName:args}}</span>

Demo1

为了方便理解，这里提供一个简单的例子。我们假设用户有0、1、2三个状态，0表示离线，1表示在线，2表示隐身。我们的过滤器应当这样写：

// js代码
app.filter('userStatus', function() {
  return function(value) {
    var result = ''
    if (value === 0) {
      result = '离线'
    } else if (value === 1) {
      result = '在线'
    } else if (value === 2) {
      result = '隐身'
    } else {
      result = value
    }
    return result
  }
})

<!-- html代码 -->
<span>{{user.status | userStatus}}</span>

其余代码就不一一赘述，以免篇幅过长，导致看官失去耐心。

思考

问题：通过以上代码，我们的过滤器功能已经实现了，但是它并不是没有缺点。我们来思考这么一个问题：当项目越来越庞大的时候，我们所需要编写的过滤器也会越来越多。这时候如果采用以上的方式，会导致过滤器数量极多，不易阅读，更难以统一管理与维护。

解决思路：

• 类似于状态类型的数据，如果要实现统一管理，我们可以将其枚举化，把数据分组存于service中；
• 利用过滤器可传参的特点，我们可以使用同一个过滤器，通过参数来辨别到底需要哪一个种过滤方式。

Demo2

具体逻辑请看注释：

// js代码
app.service('filterEnumService', function () {
    return {
        user_status: [
            {key: 1, value: '在线'},
            {key: 2, value: '离线'},
            {key: 3, value: '隐身'}
        ],
        out_cash_status: [
            {key: 1, value: '未出款'},
            {key: 2, value: '已出款'},
            {key: 3, value: '已取消'}
        ]
    }
})
app.filter('filterEnum', function (filterEnumService) {
    // 拿到service返回对象的key
    var enumName = Object.keys(filterEnumService)
    // val为原始数据，validName为过滤器参数
    return function (val, validName) {
        // 遍历key来匹配过滤器参数，如果匹配不到，直接返回原始数据
        for (var i in enumName) {
            if (enumName[i] === validName) {
                // 匹配到key之后，处理返回结果。如果原始数据在枚举数据中没有定义，将返回原始数据
                for (var j in filterEnumService[enumName[i]]) {
                    if (filterEnumService[enumName[i]][j].key === val) {
                        return filterEnumService[enumName[i]][j].value
                    }
                }
                return val
            }
        }
        return val
    }
})

<!-- html代码 -->
<span>{{user.status | filterEnum: user_status}}</span>

通过以上方法，我们完成了对这一类型过滤器的统一处理。

结语

如果文本描述有误，请在评论区给予纠正，感谢！