<!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. npm无反应的问题&npm常用命令

    RT: windows安装完nodejs后做了相关环境变量配置后,cmd输入npm命令无反应,就光标一直闪,百度了半天终于找到解决办法 解决方法:C:\Users\Administrator(或你的账 ...

  2. 前端之css样式（选择器）。。。

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  3. poj2817状态压缩 升维

    /* 两两求出字符串之间最大可以匹配的值 由已知状态推导出位置状态 状态s表示已经加入到集合中的字符串,0表示串i不存在,1存在 由于字符串的加入顺序会影响结果,所以增加一维来表示 dp[S][i]表 ...

  4. node.js 框架express关于报错页面的配置

    1.声明报错的方法,以及相对应的页面 //把数据库的调用方法配置到请求中 server.use((req, res, next) => { //把数据库存入req中 req.db = db; / ...

  5. 全局安装的 webpack运行时 报错 Error: Cannot find module 'webpack' ......

    全局安装的webpack   安装指令如下 cnpm install wepack -save-dev -g 但是 在我的项目空间运行webpack指令的时候 会报如下错误 为了方便抓取{ Error ...

  6. UI开发总结

    1. bootstrap tooltip 修改内容 <i class="ace-icon fa fa-user" id="test-tooltip" ti ...

  7. logging模板日志格式

    logging模板日志格式 创建loginfo.py模块,然后导入定义的logging配置,即可使用 cat loginfo.py """ logging配置 " ...

  8. 20165323 预备作业3 Linux安装及学习

    一.Linux安装 首先我按照老师所给的步骤下载了VirtualBox 5.2.6和Ubuntu 16.04.3.有流程下载很简单,但是在下载的过程中还是出现了一些问题. 1.VirtualBox 只 ...

  9. net core 使用 rabbitmq

    windows环境安装: https://www.cnblogs.com/ericli-ericli/p/5902270.html .NET Core 使用RabbitMQ https://www.c ...

  10. Caused by: java.lang.ClassNotFoundException: Didn't find class "io.grpc.helloworldexample.HelloworldActivity" on path: DexPathList

    FAQ:  Android app 编译好后安装到手机,运行时闪退,报如下错误: java.lang.RuntimeException: Unable to instantiate activity ...