VIP用户交流群:462197261热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
  • 当前位置:
  • 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>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。

    您可能感兴趣的文章:

    • AngularJS ng-repeat遍历输出的用法
    • AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
    • Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
    • Angular ng-repeat 对象和数组遍历实例
    • AngularJS遍历获取数组元素的方法示例
    • angular ng-repeat数组中的数组实例
    • AngularJS ng-repeat数组有重复值的解决方法
    • AngularJS中比较两个数组是否相同
    • AngularJS使用ng-repeat遍历二维数组元素的方法详解

    广而告之:
    热门推荐:
    vue+vuex+axios实现登录、注册页权限拦截

    在GitHub上有很多写好的模板,这个项目也是基于模板做的。 现在记录一下我做的过程 1、修改config文件夹里的dev.env.js里的BASE_API,把地址改成请求后端的公共部分 BASE_API: '"http://192.168.xx.xx"', 2、接下来就是操作src文件,先在 views里写好vew组件(login.vue,regi···

    浅谈JS函数定义方式的区别

    关于JS的函数定义方式有以下两种: (1)典型的函数声明 function slide(arguments){ //...code } (2)以函数表达式的形式定义函数 var slide = function(arguments){ //...code } 虽然上面两种方式逻辑上是等价的,但是还是有点小区别: 区别一:例一中的函数会在代码执行···

    substr()函数中文版

    substr()函数中文版 普通的substr()函数可以取得字符串的指定长度子字符串,但遇到中文时可能会在新字符串末尾产生乱码,下面这个函数将超过$len长度的字符串转换成以“...”结尾,并且去除了乱码。 用法:$new = getsubstring($old,20); function getsubstring($str,$len) { ···

    将数组写入txt文件 var

    $fp = fopen('aa.txt','w+'); fwrite($fp,var_export($times,true)); fclose($fp);

    MySQL开发规范与使用技巧总结

    1.命名规范 1.库名、表名、字段名必须使用小写字母,并采用下划线分割。 a)MySQL有配置参数lower_case_table_names,不可动态更改,linux系统默认为 0,即库表名以实际情况存储,大小写敏感。如果是1,以小写存储,大小写不敏感。如果是2,以实际情况存储,但以小写比较。 b)···

    使用智能 CSS 基于用户滚动位置应用样式

    通过将当前滚动偏移量添加到到 html 元素的属性上,我们可以根据当前滚动位置设置页面上的元素样式。我们可以使用它来构建一个浮动在页面顶部的导航组件。 这是我们将使用的 HTML,<header> 组件是我们希望当我们向下滚动时,始终浮动在页面顶部的一个组件。 <heade···

    如何优化Mysql千万级快速分页

    看例子: 数 据表 collect ( id, title ,info ,vtype) 就这4个字段,其中 title 用定长,info 用text, id 是逐渐,vtype是tinyint,vtype是索引。这是一个基本的新闻系统的简单模型。现在往里面填充数据,填充10万篇新闻。 最后collect 为 10万条记录,数据库表占用硬盘1.6G···

    jQuery图片切换动画特效

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换。 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很好,弄了一个简单的例子! 首先一般图片上会有两个图片按钮,···

    JavaScript中正则表达式使数字、中文或指定字符高亮显示

    <span id="span_id">span2314的23文本213</span> var htmlobj = txt.replace(/(\d+)/img, "<span style='background:red;'>$&</span>"); //var htmlobj = txt.replace(/([+\-]?[0-9]+(\.[0-9]+)?)/g, "<span style='background:red;···

    HTML中data自定义属性的使用和插件应用介绍

    大家可能会经常看到一些HTML里都带有data属性,这些都是HTML5的自定义属性,可以做很多事情,直接调用JS十分方便,虽然是HTML5的属性,但好在jQuery通用的,所以基本在所有浏览器里都是可以正常使用的,包括低版本的IE。下面为大家简单介绍一下使用方法: 1、简单使用 复制代···