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 相关文章推荐
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
jQuery解析json格式数据简单实例
Jan 22 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
微信小程序登录态控制深入分析
Apr 12 Javascript
js实现图片放大展示效果
Aug 30 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
使用vuex-persistedstate本地存储vuex
Apr 29 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实现网站顶踩功能的完整前端代码
2015/07/19 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
2015/01/13 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
Python yield 小结和实例
2014/04/25 Python
Python学习笔记(二)基础语法
2014/06/06 Python
跟老齐学Python之for循环语句
2014/10/02 Python
python抽象基类用法实例分析
2015/06/04 Python
Python利用IPython提高开发效率
2016/08/10 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
python实现BackPropagation算法
2017/12/14 Python
解决nohup执行python程序log文件写入不及时的问题
2019/01/14 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python序列类型的打包和解包实例
2019/12/21 Python
tensorflow使用指定gpu的方法
2020/02/04 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
移动web模拟客户端实现多方框输入密码效果【附代码】
2016/03/25 HTML / CSS
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
仓库班组长岗位职责
2013/12/12 职场文书
大学校庆策划书
2014/01/31 职场文书
护士的自我鉴定
2014/02/07 职场文书
迎元旦广播稿
2014/02/22 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
python 离散点图画法的实现
2022/04/01 Python
MySql数据库 查询时间序列间隔
2022/05/11 MySQL