(数据为Array数组)使用AngularJS中ng-show="{{}}",其将数据按行分为奇数行和偶数行,$even是判断是否为奇数行[如果是则为true,不是则为false],$odd判断是否为偶数行,ng-show="{{$even/$odd}}"。根据读取数据的需要对需要隐藏的数据进行隐藏和显示。

在写js将数据分为两列时使用for循环取数据进行判断。

 var oL = document.getElementById('L');
var oR = document.getElementById('R');
var awarddata = new Array();
var awarddataJ = [],
awarddataO = [];
awarddata[0]=new Array('test',1); for(var i=0;i<awarddata.length;i++){
if(i%2==0){
awarddataO.push(awarddata[i]);
var oUl = document.createElement('ul');
oUl.className = "clearfix";
oR.appendChild(oUl);
for(var j=0;j<awarddata[i].length;j++){
var oLi = document.createElement('li');
oLi.innerHTML = awarddata[i][j];
oUl.appendChild(oLi);
}
}else{
awarddataJ.push(awarddata[i]);
var oUl = document.createElement('ul');
oUl.className = "clearfix";
oL.appendChild(oUl);
for(var j=0;j<awarddata[i].length;j++){
var oLi = document.createElement('li');
oLi.innerHTML = awarddata[i][j];
oUl.appendChild(oLi);
}
}
} /*var passArr = {};
for(var i=0;i<10;i++){
arr.push(parseInt(Math.random()*100));
}
pass(arr);
function pass(arr){
var arrJ = [],arrO = [];
for(var i=0;i<arr.length;i++){
if(arr[i]%2==0){
arrO.push(arr[i]);
}else{
arrJ.push(arr[i]);
}
}
passArr.j = arrJ;
passArr.o = arrO;
return passArr;
} alert(passArr.j+'======'+passArr.o);*/

Angular JS将数据显示为两列(html)的更多相关文章

  1. {{angular.js 使用技巧}} - 实现计算列属性

    前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...

  2. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  3. (翻译)Angular.js为什么如此火呢?

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  4. python , angular js 学习记录【1】

    1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...

  5. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  6. Angular JS 学习之Bootstrap

    1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...

  7. Angular js 之一些简单的js操作

    1.<div ng-if()> </div> 括号里面是布尔值  如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会 ...

  8. angular.js初探

    2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这 ...

  9. Angular JS笔记

    1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...

随机推荐

  1. DB2 syntax error

    Error infomation:  An unexpected token "JOIN" was found following "". Expected t ...

  2. redis启用持久化

    redis的持久化有rdb和aof两种. rdb是记录一段时间内的操作,一盘的配置是一段时间内操作超过多少次就持久化. aof可以实现每次操作都持久化. 这里我们使用aof. 配置方式,打开redis ...

  3. Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次

    [请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...

  4. 基于Web2.0的RIA框架设计与实现

    http://www.doc88.com/p-8866851533856.html http://cdmd.cnki.com.cn/Article/CDMD-10614-1012472890.htm

  5. ACM算法模板

    旧版模板下载链接: here 新版的模板目前不提供电子版,正在抽时间做一些修正以及添加一些新内容. 新模板如有需要纸质版的,可以自付打印费进行打印.购买链接:https://weidian.com/i ...

  6. JavaWeb---通过ServletConfig获取Servlet的初始化参数

    package com.zyz; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import j ...

  7. UITableView 使用

    关键字 •UITableView •UITableViewDataSource •UITableViewDelegate •UITableViewCell •MVC   运行结果

  8. Dev GridControl数据修改后实时更新数据源

      1:  /// <summary> 2:  /// 嵌入的ComboxEdit控件选择值变化事件 3:  /// </summary> 4: /// <param n ...

  9. 【Debian】非法关机后无法联网 connect: network is unreachable

    某一天,突然发现无法ssh登录虚拟机内的debian系统,一直认为是ssh的问题,然后无意间ping了ping百度,发现原来是debian系统没有联网....囧 首先,是虚拟机的网络设置检查. 打开V ...

  10. inotify resources exhausted

    inotify resources exhausted tail -f /var/log/kubelet.log tail: inotify resources exhausted tail: ino ...