AngularJS使用ng-repeat遍历二维数组元素的方法详解


Posted in Javascript onNovember 11, 2017

本文实例讲述了AngularJS使用ng-repeat遍历二维数组元素的方法。分享给大家供大家参考,具体如下:

问题:

最近在做报表的项目,有一种情况是后台返回给我的是一个二维数组,在前台将数据放入到表格中,因为我们用的是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>

测试示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>3water.com 遍历二维数组元素</title>
 <script src="angular.min.js"></script>
 <script>
  var app=angular.module("lesson",[]);
  app.controller("oneCtrl",function($scope){
   $scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陕西省 ', 'l', 'p', 'o', 'i', 'u','y' ],[ '青海省 ', 1, 2, 4, 4, 5, 6 ] ];
  });
 </script>
</head>
<body ng-app="lesson" ng-controller="oneCtrl">
 遍历数组所有元素(样式一):
 <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>
</body>
</html>

运行效果:

AngularJS使用ng-repeat遍历二维数组元素的方法详解

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
jQuery实现隔行背景色变色
Nov 24 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
ES6中let 和 const 的新特性
Sep 03 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 #Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 #Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 #Javascript
详解Vue如何支持JSX语法
Nov 10 #Javascript
微信小程序异步处理详解
Nov 10 #Javascript
微信小程序实现选项卡功能
Jun 19 #Javascript
微信小程序实现多宫格抽奖活动
Apr 15 #Javascript
You might like
php xml文件操作代码(一)
2009/03/20 PHP
php程序效率优化的一些策略小结
2010/07/17 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
ThinkPHP框架实现的MySQL数据库备份功能示例
2018/05/24 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
2013/07/05 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
基于javascript实现checkbox复选框实例代码
2016/01/28 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
React性能优化系列之减少props改变的实现方法
2019/01/17 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Python实现的石头剪子布代码分享
2014/08/22 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
FragranceNet中文网:北美健康美容线上零售商
2020/08/26 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
大学生旷课检讨书
2014/01/22 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
考生诚信考试承诺书
2015/04/29 职场文书