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

本文实例讲述了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>www.jb51.net 遍历二维数组元素</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相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

赞 (0)

相关推荐

  • AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题

    本文实例讲述了AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题.分享给大家供大家参考,具体如下: 我们可以使用ng-repeat指令遍历一个JavaScript数组,当数组中有重复元素的时候,AngularJS会报错: Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. R

  • Angular ng-repeat 对象和数组遍历实例

    直接上代码 <!DOCTYPE html> <html> <head> <meta name="description" content="[Ngrepeat in obj and arr]"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script

  • AngularJS ng-repeat数组有重复值的解决方法

    AngularJS ng-repeat数组有重复值的解决方法

    前言 大家都知道默认在ng-repeat的时候每一个item都要保证是唯一的,否则console就会打出error告诉你哪个key/value是重复的. 如: $scope.items = [ 'red', 'blue', 'yellow', 'white', 'blue' ]; 这个数组blue就重复了,html这么遍历它 <li ng-repeat="item in items">{{ item }}</li> 控制台就会抛出一个错误: 点击错误链接到Ang

  • angular ng-repeat数组中的数组实例

    //先定义一个数组 anular代码: var app = angular.module('serApp', []); app.controller('indexCtrl', function($scope, $http) { $scope.arrs = [{ <BR> n:'a': arr:['1','2','1'] },{<BR><BR> n:'b': arr:['4','5','6'] }]; }) html 代码: <BR> <div ng-c

  • Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍

    Angular ng-repeat遍历渲染 业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-rep

  • AngularJS遍历获取数组元素的方法示例

    AngularJS遍历获取数组元素的方法示例

    本文实例讲述了AngularJS遍历获取数组元素的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取数组的元素例子</title> <script src="angular.min.js"></script> <s

  • 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-

  • AngularJS中比较两个数组是否相同

    Javascript不能直接用==或者===来判断两个数组是否相等,无论是相等还是全等都不行,以下两行JS代码都会返回false <script type="text/javascript"> alert([]==[]); alert([]===[]); </script> 要判断JS中的两个数组是否相同,需要先将数组转换为字符串,再作比较.以下两行代码将返回true <script type="text/javascript">

  • AngularJS ng-repeat遍历输出的用法

    AngularJS  ng-repeat遍历输出的用法,最近需要用,就顺便发到随笔上了 <!doctype html> <html> <head> <meta charset="utf-8"> <title>ng-repeat directive</title> </head> <body ng-app="myApp"> <table ng-controller=&

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

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

    本文实例讲述了AngularJS使用ng-repeat遍历二维数组元素的方法.分享给大家供大家参考,具体如下: 问题: 最近在做报表的项目,有一种情况是后台返回给我的是一个二维数组,在前台将数据放入到表格中,因为我们用的是angularJS的前台框架,所以利用ng-repeat来实现. 实现方法: 首先在js中: $scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陕西省 ', 'l', 'p', 'o', 'i', 'u','y'

  • iOS中生成指定大小、指定颜色的二维码和条形码方法详解

    iOS中生成指定大小、指定颜色的二维码和条形码方法详解

    iOS7.0之后可以利用系统原生 API 生成二维码, iOS8.0之后可以生成条形码, 系统默认生成的颜色是黑色. 在这里, 利用以下方法可以生成指定大小.指定颜色的二维码和条形码, 还可以添加背景颜色.阴影效果, 以下是具体方法. 一. 生成二维码 Avilable in iOS 7.0 and later 方法如下: #pragma mark - 生成二维码 //Avilable in iOS 7.0 and later + (UIImage *)qrCodeImageWithConten

  • PHP中使用foreach()遍历二维数组的简单实例

    第一种类型 想用foreach()遍历整个二维数组: $team = array('lk','ok'); $book = array('linux服务器配置与管理',$team); foreach($book as $k=>$val) //for $book each $value( as ) echo $k.'=>'.$val.''; 输出结果是: 0=>linux服务器配置与管理 1=>Array 当然,其实我是想要所有具体内容,而不是输出array... 所以应该采用如下做法

  • PHP中遍历二维数组_以不同形式的输出操作实例

    如下所示: <body> <?php //定义二维索引数组 $arr = array( array("101","李军","男","1976-02-20","95033"), array("103","陆君","男","1974-06-03","95031"), array("10

  • C#使用foreach语句遍历二维数组的方法

    本文实例讲述了C#使用foreach语句遍历二维数组的方法.分享给大家供大家参考.具体分析如下: 如果通过for语句循环遍历二维数组需要两重循环才可以,二foreach语句只需要一次可以完全遍历整个二维数组,下面是代码演示 using System; public class w3demo{ public static void Main() { int sum = 0; int[,] nums = new int[3,5]; // give nums some values for(int i

  • 使用vue中的v-for遍历二维数组的方法

    如下所示: <table cellpadding="0" cellspacing="0" class="clearfix bigTable" id='downloaddata'> <tr v-for='(item, index) in data'> <template v-for='items in item'> <template v-for='(itemss, indexs) in items' v-

  • go for range遍历二维数组的示例

    go for range遍历二维数组的示例

    go for range 遍历二维数组 var arry [2][3] int for index,_ := range arry { fmt.Print(index) } 运行结果: 0 1   没有遍历所有的6个元素. 二维数组 arry 可以理解为:拥有两个 一维数组元素 的一维数组,所以以上只是遍历了其的两个元素,index分别是0 1,value是两个 拥有三个int类型元素 的一维数组. var arry [2][3] int for index,value := range arr

  • java实现二维数组转置的方法示例

    java实现二维数组转置的方法示例

    本文实例讲述了java实现二维数组转置的方法.分享给大家供大家参考,具体如下: 这里在文件中创建Test2.Exchange.Out三个类 在Exchange类中编写exchange()方法,在方法中创建两个数组arraryA.arraryB,arraryB[j][i]=arraryA[i][j]实现数组的转置. 在Out类中编写out()方法,在方法中用for循环遍历实现输出. 具体代码如下: package Tsets; import java.util.*; public class Te

  • JS实现二维数组元素的排列组合运算简单示例

    JS实现二维数组元素的排列组合运算简单示例

    本文实例讲述了JS实现二维数组元素的排列组合运算.分享给大家供大家参考,具体如下: 用js实现二维数组里面的元素排列组合一个小demo: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

  • python分治法求二维数组局部峰值方法

    题目的意思大致是在一个n*m的二维数组中,找到一个局部峰值.峰值要求大于相邻的四个元素(数组边界以外视为负无穷),比如最后我们找到峰值A[j][i],则有A[j][i] > A[j+1][i] && A[j][i] > A[j-1][i] && A[j][i] > A[j][i+1] && A[j][i] > A[j][i-1].返回该峰值的坐标和值. 当然,最简单直接的方法就是遍历所有数组元素,判断是否为峰值,时间复杂度为O(n^2

随机推荐