视图:

<div ng-app="myapp" ng-controller="myctrl">
<ul>
<li ng-repeat="(k,v) in data" style="{{$even?'color: red':''}}"> <!--给偶素行添加样式-->
{{k}}
名称:{{v.name}}
网址:{{v.url}}
</li>
<li ng-repeat="(k,v) in data">
<span ng-if="$first" style="{{$first?'color:red':''}}">
{{v.name}} {{v.url}}
</span><!--第一个元素添加红色-->
<span ng-if="$middle" style="{{$middle?'color:blue':''}}"></span><!--中间元素添加蓝色-->
{{v.name}} {{v.url}}
<span ng-if="$last" style="{{$last?'color:black':''}}"></span><!--最后一个元素添加黑色-->
{{v.name}} {{v.url}}
</li>
</ul> </div>

  

控制器:

var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.data = [
{name:'成都人',url:'chengduren.com'},
{name:'成都网',url:'chengduwang.com'},
{name:'成都云',url:'chengduyun.com'},
{name:'hdphp',url:'hdphp.com'},
{name:'hdcms',url:'hdcms.com'},
];
});

  

angular 学习笔记(3) ng-repeat遍历json并且给样式的更多相关文章

  1. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  2. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  3. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  4. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  5. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  6. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  7. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  8. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  9. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  10. 【Spring学习笔记-MVC-4】SpringMVC返回Json数据-方式2

    <Spring学习笔记-MVC>系列文章,讲解返回json数据的文章共有3篇,分别为: [Spring学习笔记-MVC-3]SpringMVC返回Json数据-方式1:http://www ...

随机推荐

  1. 电脑MAC地址

    电脑MAC地址(Media Access Control) MAC地址是固化在网卡上串行EEPROM中的物理地址,通常有48位长.用来表示互联网上每一个站点的标识符,采用十六进制数表示. 任一网络设备 ...

  2. POJ 3690 Constellations (哈希)

    题意:给定上一n*m的矩阵,然后的t个p*q的小矩阵,问你匹配不上的有多少个. 析:可以直接用哈希,也可以用AC自动机解决. 代码如下: #pragma comment(linker, "/ ...

  3. UVa 11468 Substring (AC自动机+概率DP)

    题意:给出一个字母表以及每个字母出现的概率.再给出一些模板串S.从字母表中每次随机拿出一个字母,一共拿L次组成一个产度为L的串, 问这个串不包含S中任何一个串的概率为多少? 析:先构造一个AC自动机, ...

  4. jQuery插件AjaxFileUpload可以实现ajax文件上传

    http://blog.sina.com.cn/s/blog_55e42da60100ocvh.html

  5. 【hibernate-笔记】

    //1 创建,调用空参构造 Configuration conf = new Configuration().configure(); //2 根据配置信息,创建 SessionFactory对象 S ...

  6. Linux中关机和磁盘管理命令

    常用的关机命令 shutdown -h 关机 -r 重启 halt poweroff reboot 重启 logout 退出登录命令 磁盘管理命令 df -h 以1024进制计算最合适的单位显示磁盘容 ...

  7. bzoj 3944: Sum(杜教筛)

    3944: Sum Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 4930  Solved: 1313[Submit][Status][Discuss ...

  8. 洛谷P1932 A+B A-B A*B A/B A%B Problem

    P1932 A+B A-B A*B A/B A%B Problem 题目背景 这个题目很新颖吧!!! 题目描述 求A.B的和差积商余! 由于数据有修改,减法运算结果可能带负号! 输入输出格式 输入格式 ...

  9. 解读人:闫克强,Metabolic and gut microbial characterization of obesity-prone mice under high-fat diet(高脂饮食下易胖倾向小鼠的代谢和肠道微生物菌群特征分析)

    单位: 上海中医药大学 蚌埠医学院 上海交通大学附属第六人民医院 夏威夷大学癌症中心 第二军医大学 技术:非靶向代谢组学,16S rRNA测序技术 一. 概述: 本研究对小鼠进行高脂饮食,根据体重增长 ...

  10. centos 7.X关闭防火墙和selinux

    一.关闭防火墙 centos从7开始默认用的是firewalld,这个是基于iptables的,虽然有iptables的核心,但是iptables的服务是没安装的. 所以你只要停止firewalld服 ...