AngularJS循环绑定



上节课家庭作业回顾


改写第三节课的代码,由于上节课的作业和本节课要讲的主要内容非常相近,我们就把代码放在一起来给大家演示。



循环绑定的语法


实际开发工作中最常碰到的例子:表格


代码:


<!doctype html>
<html ng-app="lesson" ng-controller="lesson4">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 4
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  </style>
 
  </head>
 
  <body>
  
<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>
  
  <table style="margin-top:30px;border:1px solid blue;">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>星座</th>
<th>工作年限</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in UserEntityList | orderBy : [ 'Age','-WorkYear' ] | filter : '座' ">
<td>{{$index+1}}</td>
<td>{{x.Name | uppercase}}</td>
<td>{{x.Age}}</td>
<td>{{x.Constellation}}</td>
<td>{{x.WorkYear}}</td>
</tr>
</tbody>
  </table>
 
 
<script src="scripts/angular-1.0.1.min.js"></script>
<script>
 
 
var app = angular.module("lesson",[]);
app.controller("lesson4",function($scope){
 
$scope.UserNameList = ["Tom","Jerry","David","Tim"];
 
$scope.UserEntityList = [
{'Name':'Tim','Age':39,'Constellation':'摩羯座','WorkYear':19},
{'Name':'Tom','Age':26,'Constellation':'水瓶座','WorkYear':39},
{'Name':'David','Age':28,'Constellation':'天秤座','WorkYear':7},
{'Name':'Jerry','Age':26,'Constellation':'巨蟹座','WorkYear':139}
];
 
$scope.UserInfoList =[
["Tom",26,"水瓶座"],
["Jerry",27,"巨蟹座"],
["David",28,"天秤座"],
["Tim",39,"摩羯座"]
];
});
 
</script>
 
  </body>
</html>


执行结果:


js8.png



本课小结


1.回顾上节课家庭作业,引出循环绑定;


2.介绍了实际开发工作中最常碰到的例子:表格。



家庭作业


为表格新增一个操作列,为每一行新增一个删除按钮,点击按钮则删除本行数据。



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

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

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

客服热线 400-862-8862

回到顶部