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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
AngularJS应用开发思维之依赖注入3
Aug 19 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
详解如何用babel转换es6的class语法
Apr 03 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
详解Vue源码学习之双向绑定
Apr 10 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 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简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
php防止sql注入的方法详解
2017/02/20 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
JS解析XML的实现代码
2009/11/12 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
JavaScript手机振动API
2016/06/11 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
详解React中的组件通信问题
2017/07/31 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python设置环境变量的原因和方法
2019/06/24 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
python快速安装OpenCV的步骤记录
2021/02/22 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
信访工作经验交流材料
2014/05/23 职场文书
大专学生求职信
2014/07/04 职场文书
2015年实习单位评语
2015/03/25 职场文书