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

最新推荐文章于 2021-12-04 19:11:01 发布

雀跃set

最新推荐文章于 2021-12-04 19:11:01 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/qq_33808244/article/details/103622764

版权

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

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

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

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

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

控制器controller，作用域$scope $rootScope

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   根据传入的字段，按照此字段进行排序
      然后是自定义过滤器

1 <input ng-model="namex" type="text">
2     {{namex|capitalize}}

然后是在js里对capitalize进行定义

  
var app = angular.module('myApp', []);//声明
app.filter('capitalize',function(){
        return function(input){
            if(input){
                return input.toUpperCase();
            }
        }
    });

这个简单的列子就是把字符转换成大写。

..     input.slice(1)去掉input字符串的第一个元素

雀跃set

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs随笔01 数据双向绑定理解自定义过滤器时钟更新列子

1. 数据的双向绑定可以简单的理解为，无论在文本框中输入什么，都会在页面显示出来输入的内容，双向绑定的模型和数据是进行动态绑定的，实时检查进行修改。<input type="text" ng-model="name">{{name}} 在上述代码中，通过angular.js将数据模型对象（$scope）的name属性与文本模型绑定...
复制链接

扫一扫