AngularJS循环绑定相关使用详解

本文主要是通过实例和大家分享下AngularJS循环绑定相关用法,希望通过本文的分享能对大家学习和使用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>

 

执行结果:

 


原文链接:http://www.maiziedu.com/wiki/angularjs/loop/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值