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 相关文章推荐
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
继续学习javascript闭包
Dec 03 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
js数组与字符串常用方法总结
Jan 13 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 Javascript
vue组件vue-esign实现电子签名
Apr 21 Vue.js
详解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 Stream_*系列函数
2010/08/01 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
jQuery的12招常用技巧分享
2011/08/08 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
2013/07/02 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
2016/09/14 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
Python多线程学习资料
2012/12/19 Python
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
Python中如何引入第三方模块
2020/05/27 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
2014年党风建设工作总结
2014/11/19 职场文书
利用Python判断整数是否是回文数的3种方法总结
2021/07/07 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers