angularJS利用ng-repeat遍历二维数组的实例代码


Posted in Javascript onJune 03, 2017

最近在做报表的项目,有一种情况是后台返回给我的是一个二维数组,在前台将数据放入到表格中,因为我们用的是AngularJS的前台框架,所以利用ng-repeat来实现:

首先在js中:

$scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陕西省 ', 'l', 'p', 'o', 'i', 'u','y' ],[ '青海省 ', 1, 2, 4, 4, 5, 6 ] ];

在HTML中:

样式一:

<ul ng-repeat="a in Week">
<ul ng-repeat="b in a track by $index">
<li><b style="color: green">{{b}}</b></li>
</ul>
</ul>

样式二:

<table style="border:solid 1px">
<tr ng-repeat="a in Week" style="border:solid 1px">
<td ng-repeat="b in a track by $index" style="border:solid 1px">
<b style="color: green">{{b}}</td>
</tr>
</table>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片完美缩放
Sep 07 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
javascript与jquery动态创建html元素示例
Jul 25 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
js中url对象化管理分析
Dec 29 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
实现高性能javascript的注意事项
May 27 Javascript
微信小程序使用蓝牙小插件
Sep 23 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 #Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 #Javascript
利用vueJs实现图片轮播实例代码
Jun 03 #Javascript
angular中使用Socket.io实例代码
Jun 03 #Javascript
jquery请求servlet实现ajax异步请求的示例
Jun 03 #jQuery
深入理解Node中的buffer模块
Jun 03 #Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 #Javascript
You might like
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
Python定时任务sched模块用法示例
2018/07/16 Python
一看就懂得Python的math模块
2018/10/21 Python
查看keras的默认backend实现方式
2020/06/19 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
电大毕业生自我鉴定
2013/11/10 职场文书
实用求职信范文分享
2013/12/25 职场文书
大学活动邀请函
2014/01/28 职场文书
就业协议书样本
2014/08/20 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
【海涛解说】史上最给力比赛,挑战DOTA极限
2022/04/01 DOTA
Python日志模块logging用法
2022/06/05 Python