zoukankan      html  css  js  c++  java
  • AngularJS学习笔记五

    使用$watch监控数据模型的变化

    当数据模型中的某一部分改变时,$watch函数可以向出通知。我们可以控制单个对象的属性,也可以监控函数。

    它的函数签名为

    $watch(watchFn,watchAction,deepWatch);

    每个参数的详细含义:

    watchFn:

    该参数是一个带有Angular表达式或者函数的字符串,

    watchAction:

    这是一个函数或者表达式,当watchFn发生改变时会被调用,如果是函数形式他会接受到watchFn的新旧两个值,以及作用于对象的引用。

    其函数签名是function(newValue,oldValue,scope)。

    deepWatch:

    如果设置为true,这个可选的布尔型参数将会命令Angular去检查被监控对象的每个属性是否发生变化,如果要监数组中的元素,或者对象上的所有属性,

    而不是监视一个简单的值,就可以用这个参数。由于Angular会遍历数组或者对象,如果集合比较大,那么远算负担就会比较重。

    $watch函数会返回一个函数,当我们不再需要接受变更通知时,可以利用这个返回函数注销监视器。

    var dereg=$scope.$watch(……………..);

    dereg();

    使用过滤器格式化数据

    我们可以用过滤器来声明应该如何变换数据格式,然后在显示给用户,只要在模板中使用一个插值变量即可。

    使用过滤器语法:

    {{expression | filterName : parameter1 :……parameterN}}

    这里的表达式可以使任意的Angular表达式,filterName是我们需要使用的过滤器名称,过滤器的多个参数之间使用冒号分隔。

    Angular内置了很多过滤器,比如:

    {{12.9 | currency }}

    上面的代码将会显示如下结果:

    $12.9

    其他的过滤器还有date,number,uppercase等。

    我们也可以同时运用多个过滤器:

    {{12.9 | currency | number:0}}

    将会显示:

    $13

    numbe过滤器会把数值作为参数传递给round函数。

    我们也可以自己编写过滤器。

       1:  <!DOCTYPE html>
       2:  <html ng-app="test">
       3:  <head lang="en">
       4:      <meta charset="UTF-8">
       5:      <title></title>
       6:  </head>
       7:  <body>
       8:  {{12|testFilter}}
       9:  <script src="angular.min.js"></script>
      10:  <script>
      11:      var testModule=angular.module("test",[]);
      12:      testModule.filter("testFilter",function(){
      13:          return function(input){
      14:              return input+"filter";
      15:          }
      16:      })
      17:  </script>
      18:  </body>
      19:  </html>

    会显示:12filter。

    使用路由和$location切换视图

     

       1:  var someModule=angular.module("someModule",[....module dependencies......]);
       2:  someModule.config(function($routeProvider){
       3:       $routeProvider.
       4:            when('url',{controller:aController,templateUrl:'/path/to/tempate'}).
       5:            when('other mappings for your app'})
       6:            ..........
       7:            otherwise(.....what to do  if nothing else matches.....)
       8:  });

    当浏览器中的URL编成指定的值时,Angular将会加载/path/to/template路径下的模板,然后把这个模板中的根元素关联到aController上

    最后一行的otherwise()调用告诉路由没有可匹配的任何东西是跳到哪里。

    ng-view 指令可以告诉Angular把视图放在哪儿。

  • 相关阅读:
    json
    ajax
    oracle 分页查询
    NuGet使用
    【EF】Entity Framework使用
    【mssql】增删改查笔记
    【mysql】知识点
    【angularJS】学习笔记
    C# Ninject使用
    【CSS】Table样式
  • 原文地址:https://www.cnblogs.com/zsplove/p/3659666.html
Copyright © 2011-2022 走看看