AngularJS的ng-repeat显示表格
2024-09-06 16:00:47
代码下载:https://files.cnblogs.com/files/xiandedanteng/angualrJSngRepeatTable.rar
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="notesApp"> <head> <title> New Document </title> <style> .odd{ background-color:red; width:400px; } .even{ background-color:#336699; width:400px; } </style> <meta charset="utf-8"> <script src="angular1.4.6.min.js"></script> </head> <body> <table ng-controller="MainCtrl as ctrl"> <tr ng-repeat="(author,member) in ctrl.members" ng-class="ctrl.getBackground({{$odd}})"> <td>{{$index}}</td> <td><span ng-bind='author'/></td> <td><span ng-bind='member.id'/></td> <td><span ng-bind='member.gender'/></td> <td><span ng-bind='member.age'/></td> </tr> </table> </body> </html> <script type="text/javascript"> <!-- angular.module('notesApp',[]) .controller('MainCtrl',[function(){ var self=this; self.members={ andy:{id:11,age:20,gender:'male'}, bill:{id:12,age:21,gender:'female'}, Cindy:{id:23,age:22,gender:'male'}, douglas:{id:54,age:23,gender:'female'}, Einstein:{id:85,age:24,gender:'male'}, }; // 根据奇偶行决定背景 self.getBackground=function(odd){ if(odd==true){ return 'odd'; }else{ return 'even'; } }; }]); //--> </script>
效果:
最新文章
- Javascript中关键参数this浅析
- 《Paxos Made Simple》翻译
- 通过iframe在其父窗口中打开隐藏元素
- Hiddenfield控件
- BZOJ 3670: [Noi2014]动物园 [KMP]
- 从壹开始前后端 [vue后台] 之二 || 完美实现 JWT 滑动授权刷新
- 强化学习(十七) 基于模型的强化学习与Dyna算法框架
- python3字符串
- 百度广告联盟api probuf协议对接
- [工作积累] NBA 2K16 mobile终于发布了
- Jmeter学习之-获取登录的oken值(1)
- js高级---本地对象、内置对象、宿主对象
- 二分 poj 3273
- 使用NetHogs监控进程网络使用情况
- 多线程情况下HashMap死循环的问题
- 自定义服务与调用--------factory
- Linux root用户不能通过SSH连接的问题
- c# 二维码支持中文
- CentOS7.x安装时的分区方案
- Java final用法