首页 > 代码库 > angularjs随笔01 数据双向绑定理解 自定义过滤器 时钟更新列子
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=http://www.mamicode.com/"js/angular-1.3.0.js"></script>
7 <script src=http://www.mamicode.com/"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 数据双向绑定理解 自定义过滤器 时钟更新列子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。