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 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
Bootstrap CSS布局之按钮
Dec 17 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue 全局环境切换问题
Oct 27 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
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php框架Phpbean说明
2008/01/10 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
js数组操作学习总结
2013/11/04 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
js编写选项卡效果
2017/05/23 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python实现决策树并且使用Graphviz可视化的例子
2019/08/09 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
一款利用纯css3实现的超炫3D表单的实例教程
2014/12/01 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
印尼购物网站:iLOTTE
2019/10/16 全球购物
优秀毕业生就业推荐信
2014/05/22 职场文书
岗位安全生产责任书
2014/07/28 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书