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 相关文章推荐
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
浅谈Node.js 子进程与应用场景
Jan 24 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
ES6 Object方法扩展的应用实例分析
Jun 25 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
2014/05/26 Javascript
JavaScript错误处理
2015/02/03 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
一种新的javascript对象创建方式Object.create()
2015/12/28 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python自动连接ssh的方法
2015/03/07 Python
python中退出多层循环的方法
2018/11/27 Python
python三方库之requests的快速上手
2019/03/04 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
scrapy数据存储在mysql数据库的两种方式(同步和异步)
2020/02/18 Python
Python包资源下载路径报404解决方案
2020/11/05 Python
求职自荐信范文格式
2013/11/29 职场文书
会计求职自荐信
2014/06/20 职场文书
卖房授权委托书样本
2014/10/05 职场文书
道歉的话语大全
2015/05/12 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书