4

还是老习惯我们先来看看官方关于$filter服务的文档

  • $filter

    • 过滤器是用来格式化数据然后将这些数据展示给用户的
    • 在html模板中使用的方法如下:

      • {{expression [ | filter_name[:parameter_value] ... ]}}
    • 使用

      • $filter(filterName)
      • 参数 - filterName[string]:过滤器的名字
      • 返回值- 一个过滤器函数
  • 官方用例如下:
    html代码:
html<div ng-controller="MainCtrl">
 <h3>{{ originalText }}</h3>
 <h3>{{ filteredText }}</h3>
</div>

JS代码:

javascriptangular.module('filterExample', [])
.controller('MainCtrl', function($scope, $filter) {
  $scope.originalText = 'hello';
  $scope.filteredText = $filter('uppercase')($scope.originalText);
});

结果可以看这里jsfiddle代码

看了上面的代码,我们也就掌握了$filter的基本使用方法,下来我们要创建自己的filter
这才是真正好玩的事情^_^

T1:首先我们来创建我们的第一个filter

  • 功能:我们在一个输入框中输入一段字符串,如果这段字符串可以转换为数字的话;
    那么我们就在这段字符串的后面加上一句话" is a number",否则在字符串后面加上" is not a number "
    html代码如下:
html<div ng-app="MyApp">
    <div ng-controller="MyController">
        <input ng-model="beforeFilter" type="text">
        <div ng-bind="afterFilter"></div>
    </div>
</div>

JS代码如下:

javascriptangular.module("MyApp", [])
    // D1
    .filter("MyFilter", function () { 
    // D2
    return function (beforeFilter) {
        if (isNaN(beforeFilter)) {
            return beforeFilter + " is not a number ";
        } else {
            return beforeFilter + " is a number ";
        }
    }
})
    .controller("MyController", function ($scope, $filter) {
    // D3
    $scope.$watch("beforeFilter", function (newVal) {
        $scope.afterFilter = $filter("MyFilter")(newVal);
    })
});

结果可以看这里T1-jsfiddle代码
关于上面代码的解释:

  • D1部分使用filter创建了一个名字叫MyFilter的过滤器,注意,Myfilter后面的回调函数必须返回一个函数,我们在这个函数中写关于数据格式化的代码
  • D2部分,我们给返还的函数中传递了一个参数,这个参数就表示过滤器将要处理的原来的数据,然后我们对其进行一顿操作,对传递进来的参数我们判断它是否可以转换成一个数字,然后再作相应的操作。
  • D3部分我们还是用了$watch对我们要检测的表达式进行检测,一旦我们监测的表达式发生变化,我们就对其进行过滤操作。

T2:在这部分中我们将创造一个可以使用参数的过滤器,有没有一点兴奋呢?

  • 功能:我们在一个输入框中输入一段字符串,然后将这段字符串中我们想要的特定位置的那个字符大写
    html代码如下:
html<div ng-app="MyApp">
    <div ng-controller="MyController">
        <input ng-model="beforeFilter" type="text">
        <div ng-bind="afterFilter"></div>
        // H1
        <div>{{"hello" | nUpperFilter:1}}</div>
    </div>
</div>

JS代码如下:

javascriptangular.module("MyApp", [])
.filter("nUpperFilter",function(){
    // D1
    return function(input, n){
        if(isNaN(input)){
            var output = [];
            var index = n - 1 || 0;
            var indexChar =  input[index].toUpperCase();
            for(var i = 0; i < input.length; i++){
                if(index == i){
                    output.push(indexChar);
                }
                else{
                    output.push(input[i]);
                }
            }
            // D2
            return output.join('');
        }
        else{
            return input;
        }
    }
})
    .controller("MyController", function ($scope, $filter) {
    $scope.$watch("beforeFilter", function (newVal) {
        $scope.console = newVal;
        // D3
        $scope.afterFilter = $filter("nUpperFilter")(newVal,2);
    })
});

结果可以看这里T2-jsfiddle代码
下面是关于上面代码的一些解释:

  • D1我们给返还的函数添加了一个参数n,这个参数可以帮助我们做更多的事情,让我们有能力在传入的原始数据的特定位置改变其大小写。
  • D2因为返回的结果是一个数组,而我们想要一个字符串,所以使用了join()方法。
  • D3需要注意的是,$filter("nUpperFilter")(newVal,2)的参数是两个,第二个参数就是要改变的字符串中特定字母的的位置。
  • H1部分,html代码部分使用也有一点不同,要加入参数<div>{{"hello" | nUpperFilter:1}}</div>

当然如果大家还想深入地了解的话,我推荐大家两篇文章

如果大家觉得我哪里有不对的地方,还望及时提出,大家一起进步^_^


dreamapplehappy
6.6k 声望5.9k 粉丝

引用和评论

0 条评论