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 CSS()方法改变现有的CSS样式表
Sep 09 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
详解JS函数重载
Dec 04 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
js form表单input框限制20个字符,10个汉字代码实例
Apr 12 Javascript
Vue项目路由刷新的实现代码
Apr 17 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 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 获得汉字拼音首字母的函数
2009/08/01 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
JavaScript中的连字符详解
2013/11/28 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
[35:29]Secret vs VG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python用fsolve、leastsq对非线性方程组求解
2018/12/15 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
大家检讨书5000字
2014/02/03 职场文书
党员民主评议自我评价
2014/10/20 职场文书
计划生育工作汇报
2014/10/28 职场文书
确保工程质量承诺书
2015/04/29 职场文书
医院员工辞职信范文
2015/05/12 职场文书
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL