视图:

<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. 树莓派 Learning 002 装机后必要的操作 --- 09 root用户 密码

    树莓派 装机后必要的操作 - root用户 密码 我的树莓派型号:Raspberry Pi 2 Model B V1.1 装机系统:NOOBS v1.9.2 树莓派使用的Linux是debian系统, ...

  2. python的pip 安装

    python的pip 安装 python有很多好用的包,但是需要的时候一一安装实在是麻烦,还好有pip这么好用的安装工具.所以第一步是安装pip,然后其它软件都so easy! 文章来源:https: ...

  3. cc和gcc

    cc就是一个链接文件连接到gcc中.只不过cc是unix中常用的编辑工具,而在linux中用的gcc.有一些在unix中写好的程序要放在linux中,所以要指定命令cc为gcc,其实一样.用where ...

  4. 《鸟哥的Linux私房菜》读书笔记2

    1. 压缩后缀与压缩程序: *.Z compress 程序压缩的档案; *.bz2 bzip2 程序压缩的档案; *.gz gzip 程序压缩的档案; *.tar tar 程序打包的数据,并没有压缩过 ...

  5. hdu1099

    #include<iostream> using namespace std; __int64 gcd(__int64 a,__int64 b) { return b?gcd(b,a%b) ...

  6. SQL笔记:中级篇

    1.LIMIT 查询前多少条数据 例如:查询user表前三条数据 SELECT * FROM  user LIMIT 3 ORACLE:  SELECT name FROM user WHERE RO ...

  7. jq中打开新页面 并获取携带值

    打开新页面:window.location.href = "./index.html?id=1"获取携带值: function GetRequest() { var url = l ...

  8. Mysql-6-数据类型和运算符

    1.mysql数据类型 (1)数值数据类型:包括整数类型tinyint.smallint.mediumint.int.bigint,浮点小数类型float和double,定点小数类型decimal. ...

  9. 暴风魔镜SDK:MojingSDK For Unity V1.3.5112 (R).zip

    去年买了个暴风魔镜4,如今一直放在家里吃灰,这些天对Unity3D开发VR兴趣正浓,刚好公司项目不忙,花了几天玩玩暴风魔镜SDK,因为网上的资料不算多,暴风提供的文档也不太适合像我这样的Unity小白 ...

  10. 开发外包注意事项二——iOS APP的开发

    目前我的方式是按时间算. 首先这得建立在双方的信任基础上. 以我做过的Case为例: 首先会和客户一起评估需求: 1. 哪些功能是最为重要的 2. 哪些功能是可以删除的 3. 用什么策略保证APP的出 ...