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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
js弹出确认是否删除对话框
Mar 27 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
浅谈Webpack 持久化缓存实践
2018/03/22 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
axios异步提交表单数据的几种方法
2019/08/11 Javascript
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
bpython 功能强大的Python shell
2016/02/16 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
优秀教师演讲稿
2014/05/06 职场文书
校庆团日活动总结
2014/08/28 职场文书
秋季运动会广播稿(30篇)
2014/09/13 职场文书
办理信用卡工作证明
2014/09/30 职场文书
政风行风建设整改方案
2014/10/27 职场文书
高中历史教学反思
2016/02/19 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript