(数据为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. c#FileStream文件读写(转)

    FileStream对象表示在磁盘或网络路径上指向文件的流.这个类提供了在文件中读写字节的方法,但经常使用StreamReader或StreamWriter执行这些功能.这是因为FileStream类 ...

  2. (转)不停止Nginx服务的情况下平滑变更Nginx配置

    在不停止Nginx服务的情况下平滑变更Nginx配置 1.修改/usr/local/webserver/nginx/conf/nginx.conf配置文件后,请执行以下命令检查配置文件是否正确: /u ...

  3. 最近自己封装了个JS脚本,用来创建和操作Table

    基于JQuery封装的Table操作脚本 /** 依赖JQuery **/ (function () { var Table = window.Table = function (rowCount, ...

  4. Eclipse创建Maven时提示错误could not resolve archetype

    今天用Eclipse创建Maven多模块项目的时候提示错误: could not resolve archetype ******release from any of the configured ...

  5. Pow 算法

    #include <iostream> using namespace std; template<class T, class Int> T Pow(T x, Int n) ...

  6. Finder Item脚本如何包装成 Mac App

    第一步,包装 记得之前把一个 java 程序的 jar 包 用 automator包装成了 app, 但自己找不到做法了.回头我想了想 这么实验可行. 这样做成 app 后保存在 /Applicati ...

  7. Codeforces 702C Cellular Network

    题目:这里 题意:一条数轴上,有n个城市和m个塔,分别给出城市的位置和塔的位置,每个塔有个覆盖范围,问能将所有城市都覆盖的塔的最小范围是多少,一个城市只要被至少一个塔 覆盖就行. 可以利用贪心的思想模 ...

  8. 未添加document.ready产生的BUG

    今天在框架里使用superslide插件时,在javascript部分 <script type="text/javascript"> jQuery(".yj ...

  9. {"读取 XML 数据时,超出最大名称表字符计数配额(16384)。。。。通过更改在创建 XML 读取器时所使用的 XmlDictionaryReaderQuotas 对象的 MaxNameTableCharCount 属性,。。

    这个问题倒腾了快一周,看了网上各种解决方案,还看了用谷歌翻译看了全英文的,参照了修改也没能够解决问题. 最后只有自己一行一行断点,一行一行删除代码,各种检测.主要是我在webservice里面新添加几 ...

  10. mysql日志 解析

    mysql有4种不同的日志,分别是二进制日志,查询日志,慢查询日志和错误日志,这些日记记录着数据库工作的方方面面,可以帮助我们了解数据库的不同方面的踪迹,下面先介绍二进制日志的作用和使用方法,并利用二 ...