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 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
Symfony查询方法实例小结
2017/06/28 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
详解利用jsx写vue组件的方法示例
2017/07/17 Javascript
Vuex 入门教程
2018/01/10 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
WebSocket的简单介绍及应用
2019/05/23 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
keras多显卡训练方式
2020/06/10 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
2020/11/24 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
python中pyqtgraph知识点总结
2021/01/26 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
粗加工管理制度
2014/02/04 职场文书
工程质量月活动方案
2014/02/19 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
欢迎领导检查标语
2014/06/27 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
秋菊打官司观后感
2015/06/03 职场文书
MySQL创建管理子分区
2022/04/13 MySQL