<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="hd" ng-controller="ctrl">
{{data}}
<hr/>
<ul>
<li ng-repeat="(k,v) in data" style="{{$first?'color:red':'';}}">
{{k}}名称：{{v.name}} 网址：{{v.url}}</li>
</ul>
<hr/>
<ul>
<li ng-repeat="(k,v) in data" style="{{$middle?'color:red':'';}}">
{{k}}名称：{{v.name}} 网址：{{v.url}}</li>
</ul>
<hr/>
<ul>
<li ng-repeat="(k,v) in data" style="{{$last?'color:red':'';}}">
{{k}}名称：{{v.name}} 网址：{{v.url}}</li>
</ul>
<hr/>
<ul>
<li ng-repeat="(k,v) in data" style="{{k==2?'color:red':'';}}">
{{k}}名称：{{v.name}} 网址：{{v.url}}</li>
</ul>
<hr/>
<ul>
<li ng-repeat="(k,v) in data" ng-if="$first" style="{{$first?'color:red':'';}}">
<span>{{k}}名称：{{v.name}} 网址：{{v.url}}</span>
</li>
<li ng-repeat="(k,v) in data" ng-if="$middle" style="{{$middle?'':'';}}">
<span >{{k}}名称：{{v.name}} 网址：{{v.url}}</span>
</li>
<li ng-repeat="(k,v) in data" ng-if="$last" style="{{$last?'color:green':'';}}">
<span >{{k}}名称：{{v.name}} 网址：{{v.url}}</span>
</li>
</ul>
<hr/>
<ul ng-repeat="v in arr track by $index">
{{$index}}{{v}}
</ul>

</div>

<script>
var m=angular.module('hd',[]);
m.controller('ctrl',['$scope',function($scope){
//数组对象
$scope.data=[{name:'百度',url:'baidu.com'},
{name:'新浪',url:'sina.com'},
{name:'搜狐',url:'souhu.com'},
{name:'博客',url:'blog.com'}
];
//数组
$scope.arr=['百度','新浪','搜狐','搜狐'];

}]);
</script>
</body>
</html>

angular笔记_6的更多相关文章

  1. angular笔记

    /** * Created by Administrator on 2016/5/3 0003. */ ng-app是告诉angularjs编译器把该元素当作编译的根 //定义模块 var myApp ...

  2. Angular笔记-select

    --select-- 设置默认选中值方法: <select ng-model="url" ng-options="x.url as x.site for x in ...

  3. angular笔记_7

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. angular笔记_5(全选/反选)

    全选和反选 BUG:当鼠标点击其中一个选项后,在点击全选按钮,该选项失效 <!DOCTYPE html><html lang="en"><head&g ...

  5. angular笔记_4(函数)

    angular.isString();是否字符串 angular.isNumber();是否数字 angular.isArray();是否数组 angular.isDate();是否日期/时间 ang ...

  6. angular笔记_3

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. angular笔记_2

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. angular笔记_1

    第一个angular文件<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js&q ...

  9. Angular 笔记系列（二）数据绑定

    数据绑定这块儿没啥说的,简单两个例子带过了. Hello World: <!DOCTYPE html> <html ng-app> <head> <title ...

随机推荐

  1. 自定义Web框架

    http协议 HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本 ...

  2. linux基础实操四

    实操一: 1)为新加的硬盘分区,一个主分区大小为10剩余空间给扩展分区,在扩展分区上划分2个逻辑分别为5G 2)式化主分区为ext3系统 #mkfs.ext3 /dev/sdb1 3 将逻辑分区设置为 ...

  3. OrCAD Capture CIS 16.6 在原理图页面内放置图片

    OrCAD Capture CIS 16.6 菜单:Place > Picture... 在Place Picture窗口中,文件类型选择All Files (*.*),接着选择需要插入的图片, ...

  4. spring cloud Hystrix监控面板Hystrix Dashboard和Turbine

    我们提到断路器是根据一段时间窗内的请求情况来判断并操作断路器的打开和关闭状态的.而这些请求情况的指标信息都是HystrixCommand和HystrixObservableCommand实例在执行过程 ...

  5. web和servlet一样的用法但是有区别

  6. idea首次创建新模块的详细操作

    依赖网址:https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api/3.1.0 https://mvnrepository. ...

  7. 51 Nod 1256 乘法逆元(数论：拓展欧几里得）

    1256 乘法逆元  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出2个数M和N(M < N),且M与N互质,找出一个数K满足0 < K ...

  8. sqlserver text类型字段错误 net.sourceforge.jtds.jdbc.ClobImpl@66fa192的解决方法

    1. SqlServer数据库中text/ntext字段,在用jtds1.2驱动时,会出现用getString()取不到值的问题,toString()也不行. 昨天查了下帮助可以通过简单的配置解决.即 ...

  9. Ubuntu16.04安装vim8

    Ubuntu16.04安装vim8 在Ubuntu16.04下编译安装vim8,并配置vim-plug插件管理器,以及安装YouCompleteMe等插件. 安装依赖 sudo apt-get ins ...

  10. 如何保证Redis的高并发

    单机的redis几乎不太可能说QPS超过10万+,一般在几万. 除非一些特殊情况,比如你的机器性能特别好,配置特别高,物理机,维护做的特别好,而且你的整体的操作不是太复杂. Redis通过主从架构,实 ...