<!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. Django Rest Framework(2)

    目录 一.认证 二.权限 三.限制访问频率 四.总结 一.认证(补充的一个点) 认证请求头 #!/usr/bin/env python # -*- coding:utf-8 -*- from rest ...

  2. <a>之间怎么放值</a> 挺简单的，第一次遇到···

    需求描述:对列表中的某一列内容添加a标签(其实就是对td标签下添加a标签了). 思路简介:拿到这个我首先的反应就是在td标签对text获取内容的代码中动态拼接<a></a>字符 ...

  3. 【linux】环境变量配置

    假设要添加环境变量 JAVA_HOME 1.先用自己的个人账号 vim /etc/profile 在文件末尾添加 export JAVA_HOME=/usr/java/jdk1..0_144 2. s ...

  4. Happiness

    1575: Happiness 时间限制: 1 Sec  内存限制: 1280 MB 题目描述 Chicken brother is very happy today, because he atta ...

  5. Java 获取当前系统的时间

    获取当前系统的时间,每隔一秒,打印一次. import java.util.Date; public class TestDate { public static void main(String[] ...

  6. PHP编译安装时常见错误解决办法

    转载自:http://www.bkjia.com/PHPjc/1008013.html This article is post on https://coderwall.com/p/ggmpfa c ...

  7. 为什么访问json接口出现文件下载

    在IE9,10,11下,当服务器端返回数据格式为json,且明确设置Content-Type为”application/json;charset=utf-8“时,会提示文件下载.如图所示: 解决办法是 ...

  8. 向github上提交自己的project

    参考博客:https://blog.csdn.net/m0_37725003/article/details/80904824 step I: 创建自己的github账户(username:fourm ...

  9. sqoop无法导出parquet文件到mysql

    1.问题描述 在CDH集群中我们需要将Hive表的数据导入到RDBMS数据库中,使用Sqoop工具可以方便的将Hive表数据抽取到RDBMS数据库中,在使用Sqoop抽取Hive Parquet表时作 ...

  10. yarn的安装与使用及与npm对应的命令

    在Nodejs环境下,通过npm install -g yarn 命令进行全局安装 例如:yarn versionyarn inityarn installyarn add vueyarn add v ...