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

时间 2019-11-21

标签浅谈 angularjs filter 服务建立栏目 AngularJS 繁體版

原文原文链接

仍是老习惯咱们先来看看官方关于$filter服务的文档javascript

$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代码：html

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

结果能够看这里jsfiddle代码java

看了上面的代码，咱们也就掌握了$filter的基本使用方法，下来咱们要建立本身的filter
这才是真正好玩的事情^_^express

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代码以下：app

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:在这部分中咱们将创造一个可使用参数的过滤器，有没有一点兴奋呢？.net

功能：咱们在一个输入框中输入一段字符串，而后将这段字符串中咱们想要的特定位置的那个字符大写
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代码以下：code

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代码
下面是关于上面代码的一些解释：htm

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

固然若是你们还想深刻地了解的话，我推荐你们两篇文章

若是你们以为我哪里有不对的地方，还望及时提出，你们一块儿进步^_^