Angular JS将数据显示为两列(html)
(数据为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)的更多相关文章
- {{angular.js 使用技巧}} - 实现计算列属性
前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...
- 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 的目的是 ...
- (翻译)Angular.js为什么如此火呢?
在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...
- python , angular js 学习记录【1】
1.日期格式化 Letter Date or Time Component Presentation Examples G Era designator Text AD y Year Year 199 ...
- Angular JS 学习之路由
1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...
- Angular JS 学习之Bootstrap
1.要使用Bootstrap框架,必须在<head>中加入链接: <link rel="stylesheet" href="//maxcdn.boots ...
- Angular js 之一些简单的js操作
1.<div ng-if()> </div> 括号里面是布尔值 如果是false那么你ng-if的那个dom就会不显示.(感觉这是angular js中最给力的一点) 一般会 ...
- angular.js初探
2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这 ...
- Angular JS笔记
1.引导程序 使用ng-app开始引导一个程序:标记了AngularJS应用的作用域 <!doctype html> <html lang="en" ng-app ...
随机推荐
- ueditor使用canvas在图片上传前进行压缩
之前就看到H5使用canvas就可以在前端使用JS压缩图片,这次接到任务要把这个功能嵌入到ueditor里面去,以节省流量,减轻服务器压力. H5使用canvas进行压缩的代码有很多,核心原理就是创建 ...
- Java for循环的几种用法
J2SE 1.5提供了另一种形式的for循环.借助这种形式的for循环,可以用更简单地方式来遍历数组和Collection等类型的对象.本文介绍使用这种循环的具体方式,说明如何自行定义能被这样遍历的类 ...
- ios调用系统相册、相机 显示中文标题、本地化多语言支持
因为调用系统相册.相机需要显示中文,所以搞了半天才知道是在Project->info->Custom ios Target Properties 添加 Localizations 并加入C ...
- Flyweight(享元)--对象结构型模式
1.意图 运用共享技术有效地支持大量细粒度的对象. 2.动机 Flyweight模式描述了如何共享对象,使得可以细粒度地使用它们,而无需高昂的代价.flyweight是一个共享对象,它可以同时在多个场 ...
- nginx日志轮巡切割
通过编辑脚本的方式来实现日志每日以及每天的切割纪录.可以通过计划任务的方式实现每天执行脚本,具体情况需要更加实际情况 vim /root/cut_nginx_log.sh #!bin/sh Datef ...
- TextView.setTextColor颜色值的理解
TextView.setTextColor(int value),括号里是int型的值,可以填充的值有三种情况. 第一种:系统自带的颜色类,TextView.setTextColor(android. ...
- zabbix微信告警实践
首先你得有个企业号!!!具体操作步骤可以参考http://itnihao.blog.51cto.com/1741976/1733245,里面写的很详细就不重复了. 微信公众号注册并配置完成后,还需要让 ...
- Java C# C语言中的占位符
一般拼接一段字符串在编程中是很常见的事,下面简单做个总结: 什么是占位符?占位符就是先占住一个固定的位置,等着你再往里面添加内容的符号. 1.Java中处理方法: package com.amos; ...
- android:ems的作用
android:ems用来设置EditText或TextView显示的字符宽度. 比如:android:ems="10" 设置TextView或EditText为10个字符的宽度, ...
- 模拟退火算法求解旅行商问题(附c和matlab源代码)
前几天在做孔群加工问题,各种假设到最后就是求解旅行商问题了,因为原本就有matlab代码模板所以当时就改了城市坐标直接用了,发现运行速度惨不忍睹,最后用上了两个队友的电脑一起跑.这次模拟结束后在想用c ...