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 相关文章推荐
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
Jan 15 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
vue实现动态按钮功能
May 13 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 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脚本的10个技巧(8)
2006/10/09 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
javascript常用功能汇总
2015/07/05 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
numpy.random模块用法总结
2019/05/27 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
Pytorch实现神经网络的分类方式
2020/01/08 Python
在PyCharm中实现添加快捷模块
2020/02/12 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
python和php哪个更适合写爬虫
2020/06/22 Python
Django跨域请求原理及实现代码
2020/11/14 Python
英国护发和美妆在线商店:Klip Shop
2019/03/24 全球购物
星空联盟C# .net笔试题
2014/12/05 面试题
const和static readonly区别
2013/05/20 面试题
医药个人求职信范文
2014/01/29 职场文书
运动会入场词200字
2014/02/15 职场文书
个人自查自纠材料
2014/10/14 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python