angularjs随笔01 数据双向绑定理解 自定义过滤器 时钟更新列子

Posted ......................

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了angularjs随笔01 数据双向绑定理解 自定义过滤器 时钟更新列子相关的知识,希望对你有一定的参考价值。

    1.   数据的双向绑定可以简单的理解为,无论在文本框中输入什么,都会在数据模型中显示出来输入的内容,

双向绑定的模型和数据是进行动态绑定的,实时检查进行修改。

<input type="text" ng-model="name">
{{name}}

      在上述代码中,通过angular.js将数据模型对象($scope)的name属性与文本模型绑定在一起,然后就实现了在输入框输入什么都会

在文本模型中显示对应的内容,实时更新。

      控制器controller,

   2.时钟更新列子

  index.html

 1 <!doctype html>
 2 <html >
 3 <head>
 4     <meta charset="utf-8">
 5 </head>
 6 <script src="js/angular-1.3.0.js"></script>
 7 <script src="js/clock.js"></script>
 8 <body ng-app="myApp">
 9 <div ng-controller="MyController">
10     <h1>{{clock}}</h1>
11 </div>
12 </body>
13 </html>

clock.js

      

 1 var app=angular.module("myApp",[]);
 2 app.controller("MyController",function($scope){
 3         var updateClock=function(){
 4            $scope.clock=new Date();
 5         };
 6         setInterVal(function(){
 7            $scope.$apply(updateClock);
 8          },1000);
 9           updateClock();
10 });
11 //不理解$apply时
12 function MyController($scope, $timeout) {
13           var updateClock = function() {
14            $scope.clock = new Date();
15            $timeout(function() {
16                   updateClock();
17                  }, 1000);
18             };
19             updateClock();
20 };

   如果在页面中给ng-app赋值,就要在js中对其进行声明

 var app=angular.module("myApp",[]);

3.自定义过滤器
angularjs中存在多种过滤:
1.currency 将数值格式化,转化为货币格式
2.uppercase 字符转换为大写 lowercase 字符转换为小写
3.number number:2 就代表小数点后两位
4.date格式化 下面是angularjs教程中总结的date格式化
 1 {{ today | date:‘medium‘ }} <!-- Aug 09, 2013 12:09:02 PM -->
 2       {{ today | date:‘short‘ }} <!-- 8/9/1312:09PM -->
 3       {{ today | date:‘fullDate‘ }} <!-- Thursday, August 09, 2013 -->
 4       {{ today | date:‘longDate‘ }} <!-- August 09, 2013 -->
 5       {{ today | date:‘mediumDate‘ }}<!-- Aug 09, 2013 -->
 6       {{ today | date:‘shortDate‘ }} <!-- 8/9/13 -->
 7       {{ today | date:‘mediumTime‘ }}<!-- 12:09:02 PM -->
 8       {{ today | date:‘shortTime‘ }} <!-- 12:09 PM -->
 9       ? 年份格式化
10       四位年份: {{ today | date:‘yyyy‘ }} <!-- 2013 -->
11       两位年份: {{ today | date:‘yy‘ }} <!-- 13 -->
12       一位年份: {{ today | date:‘y‘ }} <!-- 2013 -->
13       ? 月份格式化
14       英文月份: {{ today | date:‘MMMM‘ }} <!-- August -->
15       英文月份简写: {{ today | date:‘MMM‘ }} <!-- Aug -->
16       数字月份: {{ today |date:‘MM‘ }} <!-- 08 -->
17       一年中的第几个月份: {{ today |date:‘M‘ }} <!-- 8 -->
18       ? 日期格式化
19       数字日期: {{ today|date:‘dd‘ }} <!-- 09 -->
20       一个月中的第几天: {{ today | date:‘d‘ }} <!-- 9 -->
21       英文星期: {{ today | date:‘EEEE‘ }} <!-- Thursday -->
22       英文星期简写: {{ today | date:‘EEE‘ }} <!-- Thu -->
23       ? 小时格式化
24       24小时制数字小时: {{today|date:‘HH‘}} <!--00-->
25       一天中的第几个小时: {{today|date:‘H‘}} <!--0-->
26       12小时制数字小时: {{today|date:‘hh‘}} <!--12-->
27       上午或下午的第几个小时: {{today|date:‘h‘}} <!--12-->
28       ? 分钟格式化
29       数字分钟数: {{ today | date:‘mm‘ }} <!-- 09 -->
30       一个小时中的第几分钟: {{ today | date:‘m‘ }} <!-- 9 -->
31       ? 秒数格式化
32       数字秒数: {{ today | date:‘ss‘ }} <!-- 02 -->
33       一分钟内的第几秒: {{ today | date:‘s‘ }} <!-- 2 -->
34       毫秒数: {{ today | date:‘.sss‘ }} <!-- .995 -->
35       ? 字符格式化
36       上下午标识: {{ today | date:‘a‘ }} <!-- AM -->
37       四位时区标识: {{ today | date:‘Z‘ }} <!--- 0700 -->
      5.filter过滤器   将包含传入的元素的对象输出,抛弃不包含的 
6.json将一个JSON或者对象转换成字符串
7.limitTo 根据传入的数字截取该数字长度的字符串,为正值时从头部截取,为负值的时候从尾部截取
8.orderBy 根据传入的字段,按照此字段进行排序













以上是关于angularjs随笔01 数据双向绑定理解 自定义过滤器 时钟更新列子的主要内容,如果未能解决你的问题,请参考以下文章

JS学习笔记——AngularJS 1.x双向数据绑定机制

JS学习笔记——AngularJS 1.x双向数据绑定机制

AngularJS数据双向绑定

双向数据绑定---AngularJS的基本原理学习

AngularJS双向数据绑定

Java培训实战教程之angularJS的双向数据绑定