AngularJS循环绑定相关使用详解

雨点打透心脏的1/2处 2022-07-13 21:32 134阅读 0赞

本文主要是通过实例和大家分享下AngularJS循环绑定相关用法，希望通过本文的分享能对大家学习和使用AngularJS有所帮助。

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

代码：

<!doctype html>

<html ng-app="lesson" ng-controller="lesson4">

<head>

<title>

LESSON 4

</title>

<style>

\#content1\{padding:16px;\}

</style>

</head>

<body>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr ng-repeat="x in UserInfoList">

</tr>

</tbody>

</table>

<table style="margin-top:30px;border:1px solid blue;">

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr ng-repeat="x in UserEntityList | orderBy : \[ 'Age','-WorkYear' \] | filter : '座' ">

<td>\{ \{$index+1\}\}</td>

<td>\{ \{x.Name | uppercase\}\}</td>

<td>\{ \{x.Constellation\}\}</td>

<td>\{ \{x.WorkYear\}\}</td>

</tr>

</tbody>

</table>

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>

执行结果：

![Center][]

原文链接：[http://www.maiziedu.com/wiki/angularjs/loop/][http_www.maiziedu.com_wiki_angularjs_loop]

[Center]: /images/20220714/12f5e791dc134edf8f380bf6952e978b.png
[http_www.maiziedu.com_wiki_angularjs_loop]: http://www.maiziedu.com/wiki/angularjs/loop/

AngularJS循环绑定相关使用详解

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关详解angularJs指令的3种绑定策略

相关【angularjs】数据绑定

相关 AngularJS入门-数据绑定

相关 AngularJS（2）——AngularJS数据双向绑定

相关 AngularJs数据绑定原理

相关 Angularjs动态绑定HTML文本

相关 AngularJS事件绑定的使用详解

相关 AngularJS循环绑定相关使用详解

相关 AngularJs数据绑定

相关 Firebase 的 AngularJS 绑定 AngularFire