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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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

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

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

  • AngularJS下对数组的对比分析

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

  • 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.js中数组操作的方法教程

    前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介绍. 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码":true|false",使用逗号隔开,可以

  • 详解angularjs的数组传参方式的简单实现

    初学 angularjs时,对 数组传参方式感到很好奇(['a', 'b', function(a,b){}]),它到底怎么实现的呢?后来由于工作很忙,对这个问题也就慢慢忘记了. 今天闲来无事,有想到了这个问题.最简单的方法就是查看他的源代码.无奈本人E文不好,不说看他的设计逻辑,仅看英文注释就够我头疼了.尝试闭门造车,最终竟然把车造出来了. 既然自己造的车,就要带上自己的名(取姓名拼音第一个字母),就叫他mqyJs把,下面是演示的调用方法: var app2 = mqyJs.applicat

  • 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来实现: 首先在js中: 复制代码 代码如下: $scope.Week = [[ '云南省 ', 'a', 's', 'd', 'e', 'w','t' ],[ '陕西省 ', 'l', 'p', 'o', 'i', 'u','y' ],[ '青海省 ', 1, 2, 4, 4, 5, 6 ] ]; 在HTML中: 样式一: <ul ng-

  • C++利用函数动态创建二维数组

    C++利用函数动态创建二维数组

    本文实例为大家分享了C++利用函数动态创建二维数组的具体代码,供大家参考,具体内容如下 很简单,使用两个new创建即可. 运行截图及代码如下: #include<iostream> #include<string> #include<stdio.h> #include<algorithm> using namespace std; int **creat(int m,int n) { int **p; int i,j; p = new int *[m]; f

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

  • java 遍历Map及Map转化为二维数组的实例

    java 遍历Map及Map转化为二维数组的实例 实例代码: import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class Test { public static void main(String[] args) { int a = 0, b = 0, c = 0; // 第一种:通过Map.keySet()遍历Map及将Map转化为二维数组 Map<String, String>

  • 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

  • Android利用ZXing扫描二维码的实例代码解析

    Android利用ZXing扫描二维码的实例代码解析

    相关阅读: Android开发框架之自定义ZXing二维码扫描界面并解决取景框拉伸问题 此项目源码地址:请点击这里 看一下zxing的项目结构,我这里直接拿过来用的 看一下扫码的activity: package com.fanyafeng.barcode.activity; import android.content.Intent; import android.graphics.Bitmap; import android.net.Uri; import android.os.Bundle

随机推荐