AngularJS简单的数据绑定
2016-12-06 13:19
141 查看
引用angularjs脚本库,在DOM元素上声明ng-app属性、ng-controller控制器,标签上使用ng-model指令。声明“myApp”模块(module)以及“myController”控制器(controller)
例子如下代码:
例子如下代码:
<!doctype html> <html ng-app="myApp"> <head> <meta charset="utf-8"> <title>angularjs</title> <script src="js/angular.min.js"></script> <script type="text/javascript"> var myApp=angular.module('myApp',[]); myApp.controller('myController',function($scope,$timeout){ //1.数据绑定 $scope.name="Boy"; //2.更新时钟时间(调用对象本身) var updateClock=function(){ $scope.clock=new Date(); $timeout(function(){ updateClock(); },1000) } updateClock(); //更新时钟时间(调用对象属性) $scope.clock1={ now:new Date() } var updateClockp=function(){ $scope.clock1.now=new Date(); } setInterval(function(){ $scope.$apply(updateClockp()); },1000) updateClockp(); }); </script> <style type="text/css"> b { font-family: "微软雅黑 Light"; font-size: 24px; font-weight: bold; color: #F00; } </style> </head> <body> <div ng-controller='myController'> 1.//简单的数据绑定 <br/> <input type="text" ng-model="name" placeholder="Your Name"> <b>Hello `name`</b> <br/> <br/> 2.//更新时钟时间(调用对象本身) <br/> <b>{{clock|date:'yyyy-MM-dd HH:mm:ss'}}</b> <br/> <br/> 3.//更新时钟时间(调用对象属性)<br/> <b>{{clock1.now|date:'yyyy-MM-dd HH:mm:ss'}}</b> <br/> </div> </body> </html>
相关文章推荐
- angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证
- AngularJS简单的数据绑定
- (八)简单了解下angularJS框架中NB的双向数据绑定机制,大大减少需要重复的开发代码量
- AngularJs 简单数据绑定
- AngularJS 双向数据绑定详解简单实例
- angularjs中$http、$location、$watch及双向数据绑定学习实现简单登陆验证
- angularJs的双向数据绑定,简单实用
- 使用 AJAX,局部刷新 GridView 进行数据绑定的简单实现
- 使用objectdatasource结合数据绑定控件进行简单三层架构的开发
- 使用objectdatasource结合数据绑定控件进行简单三层架构的开发
- 简单分析一下 RIA Services 的数据绑定原理
- Repeater控件多个嵌套的数据绑定之简单实现
- ADO.NET Entity Framework 一个简单数据绑定例子
- ASP.NET的简单数据绑定
- WPF学习笔记(04) - 简单的控件和数据绑定
- 使用 AJAX,局部刷新 GridView 进行数据绑定的简单实现
- ADO.NET Entity Framework 一个简单数据绑定例子
- 使用objectdatasource结合数据绑定控件进行简单三层架构的开发
- ADO.NET Entity Framework 一个简单数据绑定例子
- 简单控件数据绑定