发布于 2018-03-16 20:57:23 | 68 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的AngularJS Tutorial中文版,程序狗速度看过来!

AngularJS 前端JS框架

AngularJS诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。


这篇文章主要介绍了AngularJS使用ng-repeat遍历二维数组元素的方法,结合实例形式分析了AngularJS二维数组元素遍历的相关操作技巧,需要的朋友可以参考下

本文实例讲述了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.phperz.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程序设计有所帮助。



相关阅读 :
AngularJS使用ng-repeat遍历二维数组元素的方法详解
angularJS利用ng-repeat遍历二维数组的实例代码
AngularJS遍历获取数组元素的方法示例
AngularJS ng-repeat遍历输出的用法
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Angularjs使用ng-repeat中$even和$odd属性的注意事项
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
AngularJS使用ng-repeat指令实现下拉框
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Angularjs使用directive自定义指令实现attribute继承的方法详解
AngularJS创建自定义指令的方法详解
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务