(数据为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. iOS开发常见BUG和一些小技巧(ps:耐心看完,很实用)

    [385][scrollView不接受点击事件,是因为事件传递失败] // // MyScrollView.m // Created by beyond on 15/6/6. // Copyright ...

  2. [原创.数据可视化系列之六]使用openlyaers进行公网地图剪切

    进行地图开发的过程中,我一般使用天地图或者微软的地图作为地图,因为这两种地图的经纬度偏差最小,基本可以满足用户需求,比如: 不用说,都是全部地图,这也是最常用的一种方法. 但是用户说,我只看大连的地图 ...

  3. 介绍开源的.net通信框架NetworkComms框架 源码分析(二十二 )TCPConnectionStatic

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...

  4. centos7安装数据库

    centos7的yum源中貌似没有正常安装MySQL时的mysql-server. 那么就需要从官网下载了. 下面是安装mysql的命令: # wget http://dev.mysql.com/ge ...

  5. Versioned table in Netezza

    Problem One QC process need to obtain tables and their row counts in a database in Netezza. We use t ...

  6. char类型输出地址

    问题描述: 当输出char的地址时,发现输出的是一个字符: char ch = 'a'; cout<<&ch<<endl;//a @ 因为cout得到一个char类型的 ...

  7. Android Studio 出现Failed to open zip file的问题

    修改gradle . 首先我们打开setting搜索gradle.我们可以从该界面上看到gradle的版本.

  8. Java重点之小白解析--浅谈数据流形式图片上载

    文档上载,上载也不知道哪个大神(混球)起的名字,读起来怪怪的,反正平时我只读上传. 闲话少说,直入主题.先等等这两天做文件上传,都快把宝宝折磨疯了,不会呀,各种查呀,最可悲的是废了老大功夫学会了传送文 ...

  9. es6新特性(一)

    关于es6,阮一峰的<ECMAScript 6入门> http://es6.ruanyifeng.com/写的非常详尽,可以经常看看,这里是对这本书进行一个缩略,可能有误,欢迎大家纠正.

  10. js 基本类型与引用类型的区别

    1. 基本类型: string,number,boolean,null,undefined 2. 引用类型: Function,Array,Object 访问方式                   ...