浅谈AngularJS的$filter服务和创建AngularJS的filter 1

2019年9月15日 92次阅读 来源: dreamapplehappy

还是老习惯我们先来看看官方关于$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
    原文地址: https://segmentfault.com/a/1190000002758481
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞