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 相关文章推荐
JS中的eval 为什么加括号
Apr 13 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
js插件dropload上拉下滑加载数据实例解析
Jul 27 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
详解PHP中cookie和session的区别及cookie和session用法小结
2016/06/12 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
json 实例详细说明教程
2009/10/31 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
javascript操作css属性
2013/12/30 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
基于jQuery Tipso插件实现消息提示框特效
2016/03/16 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
深入分析element ScrollBar滚动组件源码
2019/01/22 Javascript
js实现蒙版效果
2020/01/11 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
python遍历一个目录,输出所有的文件名的实例
2018/04/23 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
党员教师工作决心书
2014/03/13 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
2014年大学生工作总结
2014/11/20 职场文书
师德先进个人材料
2014/12/20 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
早上好问候语大全
2015/11/10 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
python必学知识之文件操作(建议收藏)
2021/05/30 Python