AngularJS 基础教程二：

2022-12-04 17:38:56

5.过滤器

过滤器的主要功能是格式化数据可以使用Angular提供的过滤器，也可以自定义过滤器 Angular过滤器：

currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制长度)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。

例：{{ nowdate | date:'yyyy-mm-dd hh:mm:ss'}}

过滤器的3种调用方式：

单个过滤器 { 100.00 | currency } $100.00

多个过滤器 { 100.00 | currency | number:1 }$100.0

带参数的过滤器 { 100.00 | currency:'￥' }

①filter过滤器

（1）filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索

<ul class="messages">

    <li ng-repeat="item in messages | filter:{content:123}">

        {{item.content}}

    </li>

</ul>

（2）filter过滤器会根据设置的检索数据过滤未匹配到的数据内容，也可以通过设置检索条件为一个对象，实现在指定属性中检索

<ul class="messages">

    <li ng-repeat="item in messages | filter:{content:123}">

        {{item.content}}

    </li>

</ul>

（3）过滤器函数参数

<ul class="numbers">

    <li ng-repeat="item in numbers | filter:1:comparator">

        {{ item }}

    </li>

</ul>

// js代码

$scope.comparator = function (source,target) {

    return source > target;

};

（4）自定义过滤器 Module.filter（）

angular.module('MyAppFilters', []).filter('checkmark', function() {

    return function(input) {   //过滤器函数 接受一个参数 为需要过滤的数据

        return input ? ‘\u2713’ : ‘\u2718’;  //返回过滤后的数据格式

    };

});

{{  name  |  checkmark }}

5.作用域

　　AngularJS对象提供的controller方法可以创建控制器。创建控制器后，需要区别控制器所支持的视图。通过ng-controller指令可以指定控制器支持的视图。控制器的参数包括一个工厂函数，该函数接受一个参数$scope，表明该控制器对$scope服务的依赖。这时控制器可以通过$scope对应的作用域与视图建立联系。 $scope作用域不但定义了控制器和视图之间的关系，而且对许多重要的AngularJS特性如：数据绑定，提供了运转机制。控制器通过在控制器函数中定义数据和行为使用作用域。

　　$scope对象实际上是一个作用域对象，作用域能存储数据模型，为表达式提供上下文环境，监听表达式的变化，传播事件。是视图和控制器之间的重要桥梁。作用域的特点：为表达式提供执行环境，一个表达式必须在拥有该表示式属性的作用域中执行。作用域通过提供$scope对象，使所有的表达式都拥有对应的执行环境，也就是执行的上下文。提供了一个$watch方法监听数据模型的变化，之所以能使用ng-model指令实现数据的双向绑定，就是隐式的调用该方法进行数据模型的监听，只要有一端发生变化，另外绑定的一端自动进行数据同步。提供了一个$apply方法，为各种类型的数据模型改变提供支撑，将它们引入到Angular可控制的范围中。这个可控制的范围最典型的就是控制器，例如：通过ng-click指令，执行控制器中的代码。

6.$watch方法，$digest方法，$apply方法三者之间的关系

　　$watch是一个scope函数，用于监听模型变化，当你的模型部分发生变化时它会通知你。 $watch(watchExpression, listener, objectEquality); 每个参数的说明如下： watchExpression（必须）：监听的对象，它可以是一个string，将被计算为表达式 ,或函数如function(){return $scope.name}。 listener:当watchExpression（监听对象）变化时会被调用的函数或者表达式,它接收3个参数：newValue(新值), oldValue(旧值), scope(作用域的引用) objectEquality：是否深度监听，如果设置为true,它告诉Angular检查所监控的对象中每一个属性的变化. 如果你希望监控数组的个别元素或者对象的属性而不是一个普通的值, 那么你应该使用它。

　　$digest：Angular会运行一个函数$digest来检查scope模型中的数据是否发生了变化。在$digest循环中，watchers会被触发。当一个watcher被触发时，AngularJS会检测它所监听的scope模型，如果监听对象发生了变化那么关联到该watcher的回调函数就会被调用。这种方法叫做脏检查。在angular程序初始化时，会将绑定对象的属性添加为监听对象（watcher），也就是说一个$scope对象绑定了N个属性，就会添加N个watcher。 angular什么时候去脏检查呢？angular所定义的方法中都会触发$digest事件，比如：controller初始化的时候，所有以ng-开头的指令执行后，都会触发脏检查用户与视图发生交互行为以后会触发脏检查。调用$digest方法： $scope.$digest();

　　$apply:AngularJS并不直接调用$digest()，而是调用$scope.$apply()，$apply方法就是将$digest方法包装了一层，会调用$rootScope.$digest()。因此，一轮$digest循环在$rootScope开始，随后会访问到所有的children scope中的watchers。 $apply()方法接受一个可选参数，可以是string，string将被看作表达式并计算结果，也可以是函数。当接受function作为参数，会执行该function并且触发一轮$digest循环。不接受任何参数，触发一轮$digest循环会，检查该$scope里的所有监听的属性。如果你在AngularJS上下文之外的任何地方修改了model，那么你就需要通过手动调用$apply()来通知AngularJS。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>行程安排</title>

    <link href="../css/bootstrap.css" rel="stylesheet">

    <script src="../script/angular.min.js"></script>

    <script>

        var app = angular.module('myapp', []);

        app.controller("myController", function ($scope) {

            $scope.message = '原来的信息';

            $scope.getMessage = function(){

                setTimeout(function(){

            //message刚开始不是监听对象，对它加上$scope.$apply后才可以监听

                    $scope.$apply(function () {

                        $scope.message = '两秒后更新';

                        alert('message'+$scope.message);

                    });

                    //$scope.$apply();

                },2000)

            }

            $scope.getMessage();

        })

    </script>

</head>

<body ng-app="myapp" ng-controller="myController">

{{message}}

</body>

</html>

码农公寓

相关文章