<!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. 新增 修改，对xx名字或者其他属性做校验判断是否存在

    需求描述:页面输入完xxName和xx编码,点击提交,根据两项内容做重复校验(就是看看数据库里有木有相同的) 解决思路:把这两个东西作为查询条件去查,查到有记录,提示已存在,就不执行新增或者修改操作. ...

  2. SSM文件下载

    SSM框架文件下载比文件上传稍微麻烦一点,但这次还是写成最简朴的形式,哈哈~如下 参考:http://blog.csdn.net/lcx556224523/article/details/702076 ...

  3. java基础应用循环的应用

    1.1 [经典面试题]: &&(短路与)与&(非短路与)的区别: 表达式1 && 表达式2 表达式1如果为false,表达式2不执行,整个表达式结果为false ...

  4. C. cltt的幸运数LCAtarjan

    /*C: cltt的幸运数 Time Limit: 1 s      Memory Limit: 128 MB Submit Problem Description 一棵树有n个节点,共m次查询,查询 ...

  5. 金蝶开k3wise客户端访问中间层不时提示远程服务器不存在或不可用

    此问题一般是发生在WIN7客户端+中间层为WIN2008 R2系统,一般是中间层启用guest引起: a. 从Windows Vista以后, Negotiate (http://msdn.micro ...

  6. Asp.Net MVC Ajax轮训解决Session失效时间

    这种方法不是太好,对服务器得压力大,由于系统是内部人员使用,业务有比较复杂,所以有些值得需要Session去保存,但是,Session有失效时间. 代码如下: $(function () { func ...

  7. [BJOI2018]双人猜数游戏

    题解: 彻彻底底的思维题???还是挺难的.. 首先连样例解释都没给..没看题解搞了很久 大概就是 一个人要根据另一个人的决策来猜数 可以去看洛谷那篇题解的解释 然后我们用$f[A/B][i][j][k ...

  8. WebAPI——自动生成帮助文档

    Web Api 自动生成帮助文档   新建Web Api项目之后,会在首页有API的导航菜单,点击即可看到API帮助文档,不过很遗憾,Description 是没有内容的. 怎么办呢? 第一步: 如果 ...

  9. day84-仿照admin实现一个自定义的增删改查组件

    一.admin的使用 app01的admin.py文件: class BookConfig(admin.ModelAdmin): list_display=[] list_display_links= ...

  10. 去掉select的原有样式

    1:设置select的边框为0px,背景设成透明(background: transparent;),这时候你会看到边框没有了,但是小三角还是在的.再在select外面加个div,固定死div的宽度, ...