AngularJS简单数据绑定



上节课家庭作业回顾


我们修改上节课的代码,具体代码实现如图所示:


js5.png


执行结果:


js6.png


从上图中我们可以清晰的看到,时间在流动,这样我们就完成了上节课的家庭作业。上面的时间绑定的例子极其重要。



实例


1.实例一:第一节课内容的延展:组合绑定;


2.实例二:简单的数组数据绑定;


3.实例三:表格绑定。


代码示例:


<!doctype html>
<html ng-app="lesson" ng-controller="lesson3"   >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 3
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  </style>
 
  </head>
 
  <body>
  
  <ul>
<li>姓:<input  ng-model="xing" /></li>
<li>名:<input  ng-model="ming" /></li>
<li>Hello <b >{{xing || ''}} {{ming || ' ' }}</b></li>
<li>Hello <b >{{FullName}}</b></li>
  </ul>
  
  <ul >
<li ng-repeat="a in UserNameList">{{a}}</li>
  </ul>
  <hr />
  <table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>星座</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in UserInfoList">
<td>{{x[0]}}</td>
<td>{{x[1]}}</td>
<td>{{x[2]}}</td>
</tr>
</tbody>
  </table>
  
<script src="scripts/angular-1.0.1.min.js"></script>
<script>
var app = angular.module("lesson",[]);
app.controller("lesson3",function($scope){
 
$scope.xing="";
$scope.ming="";
 
$scope.FullName = $scope.xing+$scope.ming;
 
$scope.$watch("xing",function(){
$scope.FullName = $scope.xing+$scope.ming;
})
$scope.$watch("ming",function(){
$scope.FullName = $scope.xing+$scope.ming;
})
 
$scope.UserNameList = ["Tom","Jerry","David","Tim"];
$scope.UserInfoList =[
["Tom",26,"水瓶座"],
["Jerry",27,"巨蟹座"],
["David",28,"天秤座"],
["Tim",39,"摩羯座"]
];
});
 
</script>
 
  </body>
</html>


执行结果:

 

js7.png



小结


1.在AngularJs中的简单数据绑定;


2.表格的绑定;


3.数组的绑定;


4.组合绑定;



作业


今天我们采用二维数组实现表格的数据,大家思考如何用对象数组绑定表格。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部