AngularJS简单的数据绑定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AngularJS简单的数据绑定相关的知识，希望对你有一定的参考价值。
引用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>
本文出自 “记录成长点滴” 博客，请务必保留此出处http://huatumi.blog.51cto.com/8272213/1879956
以上是关于AngularJS简单的数据绑定的主要内容，如果未能解决你的问题，请参考以下文章