angular笔记_6
<!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的更多相关文章
- angular笔记
/** * Created by Administrator on 2016/5/3 0003. */ ng-app是告诉angularjs编译器把该元素当作编译的根 //定义模块 var myApp ...
- Angular笔记-select
--select-- 设置默认选中值方法: <select ng-model="url" ng-options="x.url as x.site for x in ...
- angular笔记_7
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- angular笔记_5(全选/反选)
全选和反选 BUG:当鼠标点击其中一个选项后,在点击全选按钮,该选项失效 <!DOCTYPE html><html lang="en"><head&g ...
- angular笔记_4(函数)
angular.isString();是否字符串 angular.isNumber();是否数字 angular.isArray();是否数组 angular.isDate();是否日期/时间 ang ...
- angular笔记_3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- angular笔记_2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- angular笔记_1
第一个angular文件<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js&q ...
- Angular 笔记系列（二）数据绑定
数据绑定这块儿没啥说的,简单两个例子带过了. Hello World: <!DOCTYPE html> <html ng-app> <head> <title ...
随机推荐
- LeetCode（106）：从中序与后序遍历序列构造二叉树
Medium! 题目描述: 根据一棵树的中序遍历与后序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序遍历 posto ...
- LeetCode（65）：有效数字
Hard! 题目描述: 验证给定的字符串是否为数字. 例如:"0" => true" 0.1 " => true"abc" =& ...
- 渗透测试（theharvester >>steghide）
1.不喜欢自己搭建平台来做测试,所以啦..... 网络信息安全漏洞的威胁总结起来就是人的漏洞,拿DNS服务器来说,一般不出现问题就不会管他,所以很多会被黑客利用,DNS服务器保存了企业内部的IP地址列 ...
- cf1073c 二分+二维前缀和
#include<bits/stdc++.h> using namespace std; #define maxn 200005 char s[maxn]; ][maxn]; map< ...
- 20165323 结对编程之四则运算week2-整体总结
一.需求 实现一个命令行程序,要求: 1.自动生成小学四则运算题目(加.减.乘.除) 2.支持整数 3.支持多运算符(比如生成包含100个运算符的题目) 4.支持真分数 5.能判断错误,在输入错误结果 ...
- Gradle Build速度加快方法汇总
Android Studio用起来越来越顺手,但是却发现Build的速度实在不敢恭维,在google和度娘了几把(....)之后,大体就是分配更高的内存,步骤:Setting-->搜索gradl ...
- 一脸懵逼学习Hive（数据仓库基础构架）
Hive是什么?其体系结构简介*Hive的安装与管理*HiveQL数据类型,表以及表的操作*HiveQL查询数据***Hive的Java客户端** Hive的自定义函数UDF* 1:什么是Hive(一 ...
- 【Android】Android apk默认安装位置设置
在Android工程中,设置apk的默认安装位置 在AndroidManifest.xml文件Manifest标签中添加android:installLocation属性 android:instal ...
- day4.字符串练习题
有变量 name = “alex leNb”,完成如下操作 1. 移除name变量对应的值两边的空格,并输出处理结果 print(name.strip()) 2. 移除name变量左边的’al’并输出 ...
- Springboot+websocket+定时器实现消息推送
由于最近有个需求,产品即将到期(不同时间段到期)时给后台用户按角色推送,功能完成之后在此做个小结 1. 在启动类中添加注解@EnableScheduling package com.hsfw.back ...