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程序设计有所帮助。
相关推荐
-
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遍历获取数组元素的方法.分享给大家供大家参考,具体如下: <!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指令中使用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数组中的数组实例
//先定义一个数组 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 对象和数组遍历实例
直接上代码 <!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数组有重复值的解决方法
前言 大家都知道默认在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
-
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中生成指定大小、指定颜色的二维码和条形码方法详解
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 遍历二维数组 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实现二维数组转置的方法.分享给大家供大家参考,具体如下: 这里在文件中创建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实现二维数组里面的元素排列组合一个小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
随机推荐
- 如何在ASP.NET Core应用程序运行Vue并且部署在IIS上详解
- mybatis collection 多条件查询的实现方法
- SQL Server 2008登录错误:无法连接到(local)解决方法
- MyBatis之自查询使用递归实现 N级联动效果(两种实现方式)
- python登录豆瓣并发帖的方法
- 关于原生js中bind函数的简单实现
- linux下安装php扩展memcache的方法
- javascript实现存储hmtl字符串示例
- vue.js指令和组件详细介绍及实例
- 科普Solaris系统安全常用命令小结
- Jquery选择子控件"大于号"和" "区别介绍及使用示例
- 服务器绝对安全简要设置策略操作指南第1/2页
- 详解Linux Centos7下安装Python的方法
- 浅谈Linux系统中的异常堆栈跟踪的简单实现
- mybatis中批量插入的两种方式(高效插入)
- SAE实时日志接口SDK用法示例
- 用python实现的线程池实例代码
- Python爬虫设置代理IP的方法(爬虫技巧)
- java 直接调用python脚本,并传递参数代码实例
- 详解Webpack如何引入CDN链接来优化编译后的体积