AngularJS1.X学习笔记3-内置模板指令
前面学习了数据绑定指令，现在开始学习内置模板指令。看起来有点多，目测比较好理解。OK！开始！
一、ng-repeat
1、基本用法
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>databinding1</title>
</head>
<body>
<div ng-controller='dataCtrl'>
<table width="80%">
<tr><td>事项</td><td>完成否</td></tr>
<tr ng-repeat="item in todos"><td>{{item.action}}</td><td>{{item.complete}}</td></tr>
</table>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('dataCtrl',function($scope){
$scope.todos = [
{action:"学习1",complete:false},
{action:"学习2",complete:true},
{action:"学习3",complete:false},
{action:"学习4",complete:false},
{action:"学习5",complete:false},
{action:"学习6",complete:false},
];
})
</script>
</body>
</html>
2、操作键值
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ng-repeat2</title>
</head>
<body>
<div ng-controller='dataCtrl'>
<ul>
<li ng-repeat="item in todos">
<p ng-repeat="(key,value) in item">{{key}}={{value}}</p>
</li>
</ul>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('dataCtrl',function($scope){
$scope.todos = [
{action:"学习1",complete:false},
{action:"学习2",complete:true},
{action:"学习3",complete:false},
{action:"学习4",complete:false},
{action:"学习5",complete:false},
{action:"学习6",complete:false},
];
})
</script>
</body>
</html>
3、内置变量的使用
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ng-repeat3</title>
</head>
<body>
<div ng-controller='dataCtrl'>
<table width="80%">
<tr>
<td>序号</td>
<td>事项</td>
<td>完成否</td>
</tr>
<tr ng-repeat="item in todos">
<td>{{$index+1}}</td>
<td>{{item.action}}</td>
<td>{{item.complete}}</td>
</tr>
</table>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('dataCtrl',function($scope){
$scope.todos = [
{action:"学习1",complete:false},
{action:"学习2",complete:true},
{action:"学习3",complete:false},
{action:"学习4",complete:false},
{action:"学习5",complete:false},
{action:"学习6",complete:false},
];
})
</script>
</body>
</html>
ng-repeat 内置变量一览表
| 变量 | 意义 |
| $index | 返回当前属性或对象的位置（0开始） |
| $first | 当前对象为集合的第一个返回true |
| $middle | 当前对象不是第一个也不是最后一个返回true |
| $last | 当前对象为集合的最后一个返回true |
| $even | 偶数编号为true |
| $odd | 奇数编号为true |
4、重复生成多个顶层元素
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ng-repeat4</title>
</head>
<body>
<div ng-controller='dataCtrl'>
<table width="80%">
<tr>
<td>序号</td>
<td>事项</td>
<td>完成否</td>
</tr>
<tr ng-repeat-start="item in todos">
<td>第{{$index+1}}项</td>
</tr>
<tr>
<td>
事项是：{{item.action}}
</td>
</tr>
<tr ng-repeat-end>
<td>
{{$index+1}} {{item.complete?"已经":"没有"}} 完成
</td>
</tr>
</table>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('dataCtrl',function($scope){
$scope.todos = [
{action:"学习1",complete:false},
{action:"学习2",complete:true},
{action:"学习3",complete:false},
{action:"学习4",complete:false},
{action:"学习5",complete:false},
{action:"学习6",complete:false},
];
})
</script>
</body>
</html>
一个项要生成几行，这个时候就需要用这种重复生成顶层元素的方法。
二、ng-include
自由男人说ng-include指令是从服务器获取一段html代码，编译并处理其中包含的任何指令，并添加到DOM中去。
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>databinding1</title>
</head>
<body>
<div ng-controller='dataCtrl'>
<ng-include src="'table.html'"></ng-include>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('dataCtrl',function($scope){
$scope.todos = [
{action:"学习1",complete:false},
{action:"学习2",complete:true},
{action:"学习3",complete:false},
{action:"学习4",complete:false},
{action:"学习5",complete:false},
{action:"学习6",complete:false},
];
})
</script>
</body>
</html>
我将表格单独做了一个叫做table.html的文件，然后用ng-include引进来了。但是第一次没有成功，检查发现比书上少了两个单引号，这是个坑。自由男人又说了，src属性是被当作js表达式计算的，要静态定义一个文件就得用单引号。
这个指令还有两个属性：onload用于指定在内容被加载时计算的表达式;autoscroll指定内容加载是是否应该滚动到这个区域。另外可以将ng-include用作属性。类似这个样子：
<div ng-include="path" onload="xxx"></div>
三、ng-switch
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>ng-switch</title>
</head>
<body>
<div ng-controller='dataCtrl'>
<input type="text" name="t" ng-model="data">
<div ng-switch on="data">
<div ng-switch-when="1">
我是data为1的视图。
</div>
<div ng-switch-when="2">
我是data为2的视图。
</div>
<div ng-switch-when="3">
我是data为3的视图。
</div>
<div ng-switch-default>
我是data为默认情况下的视图。
</div>
</div>
</div> <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('dataCtrl',function($scope){
$scope.data = "1";
})
</script>
</body>
</html>
ng-switch on="要检测的数据"
ng-switch-when="要检查的条件"
ng-switch-default 没有满足的
四、其他内置模板指令
| 指令 | 怎么用 | 干嘛的 |
| ng-if | A | 从DOm中删除或者添加元素 |
| ng-show | AC | 显示隐藏元素 |
| ng-hide | AC | 显示隐藏元素 |
| ng-style | AC | 设置CSS属性 |
| ng-class | AC | 为元素指定一个类 |
| ng-class-even | AC | 为偶数元素设置类 |
| ng-class-odd | AC | 为奇数元素设置样式 |
这里不做实验了，做个表用的时候方便查。
预告：接下来学习事件指令！好激动，又学完一个点。加油加油！先活动一下！
AngularJS1.X学习笔记3-内置模板指令的更多相关文章
- flask_admin 笔记五 内置模板设置
内建模板 Flask-Admin是使用jinja2模板引擎 1)扩展内建的模板 不要完全覆盖内置的模板,最好是扩展它们. 这将使您更容易升级到新的Flask-Admin版本. 在内部,Flask-Ad ...
- python自动化测试学习笔记-4内置函数，处理json
函数.全局变量 写代码时注意的几点事项: 1.一般写代码的时候尽量少用或不用全局变量,首先全局变量不安全,大家协作的情况下,代码公用容易被篡改,其次全局变量会一直占用系统内容. 2.函数里如果有多个r ...
- 学习笔记——Maven 内置变量
Maven内置变量说明: ${basedir} 项目根目录(即pom.xml文件所在目录) ${project.build.directory} 构建目录,缺省为target目录 ${project. ...
- Python学习笔记-Day3-python内置函数
python内置函数 1.abs 求绝对值 2.all 判断迭代器中的所有数据是否都为true 如果可迭代的数据的所有数据都为true或可迭代的数据为空,返回True.否则返回False 3.a ...
- 【学习】js学习笔记：内置顶层函数eval()的兼容用法
今天学了一个内置顶层函数,eval();其作用是将字符串转换成javascript命令执行,但必须符合语法,否则会报错. 如果写成window.eval(),则其定义的变量会在全局生效. 但是,在IE ...
- java web 学习笔记 jsp内置对象
jsp2 表达式语言的内置对象 使用方式${object.attributename} 或者${object["attributename"]} pageContext pageS ...
- Python学习笔记-常用内置函数
输出:print() 功能:输出打印 语法:print(*objects, sep=' ', end='\n', file=sys.stdout) 参数:objects----复数,表示可以一次输出多 ...
- [Python学习笔记-001] 内置函数getattr()
如果某个实例foo有多个方法, 当对foo的每一个方法我们都需要使用try ... except ...进行包装的时候,内置函数getattr()可以用来精简代码. 1. getattr()的用法 # ...
- python学习笔记011——内置函数pow()
1 语法 pow(x, y[, z]) x -- 数值表达式. y -- 数值表达式. z -- 数值表达式. 函数是计算 x 的 y 次方,如果 z 在存在,则再对结果进行取模,其结果等效于pow( ...
- Python学习笔记011——内置函数exec()
1 描述 把一个字符串当成语句执行 exec() 执行储存在字符串或文件中的 Python 语句,相比于 eval() , exec() 可以执行更复杂的 Python 代码. exec函数和ev ...
随机推荐
- Java之路——敬JAVA初学者（作者：MoMo）
作为一名大四的毕业生,大学三年过,有得有失.作为一个喜欢编程,喜欢JAVA的人,自学其实是一件美事,很有意思的事.要是能再找个女朋友一起学.嘿嘿,就不枉在大学走了一遭啊! 要离开学校了,还是想留 ...
- JAVA设计模式：单例设计
1.单例设计Singleton的引出 单例设计,从名字上首先可以看出单---即只有一个,例---只的是实例化对象:那么单例也就是说一个类,只产生了一个实例化对象.但是我们都知道,一个类要产生实例化对象 ...
- Vue2.0源码阅读笔记--双向绑定实现原理
上一篇 文章 了解了Vue.js的生命周期.这篇分析Observe Data过程,了解Vue.js的双向数据绑定实现原理. 一.实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了,实现双向 ...
- SaberRD之直流工作点分析
直流工作点分析(DC Operating Point Analysis)用于确定电路的静态工作点. 静态工作点的概念来源于三极管的电流放大特性.三极管放大电路中,当交流输入信号为零时,电路处于直流工作 ...
- iOS开发学习路径的一些建议
结合自己情况聊下iOS学习建议,这里不讲大道理,说说具体怎么做.欢迎大家拍砖. 1.第一点要求 ,能比较顺畅的阅读官方的文档 如果你连官方的文档读起来都非常困难,那你还谈什么提高和进阶,咱们学习iOS ...
- 关于hosts文件的原理与制作
由于需要整理的关于hosts的文件 关于hosts文件的原理与制作1.什么是hosts文件hosts文件是一个没有扩展名的系统文件,hosts文件用于存储计算机网络中节点信息的文件,它是可以将主机名映 ...
- ArrayList源码剖析
ArrayList简介 ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存. ArrayList不是线程安全的,只能用在单线程环境下,多线 ...
- jenkins配置邮箱服务器（126邮箱）
安装Email Extension Plugin 安装过程容易失败,多试几次 一.开启126邮件的SMTP获取授权码 二.配置管理员邮件地址 三.设置邮件通知 四.点击Test Configura ...
- WeMall商城系统的Android app商城中的wemall-mobile代码
wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改. [适合研究学习,支持wemall3.x版本] 1.快 ...
- 2659: [Beijing wc2012]算不出的算式
2659: [Beijing wc2012]算不出的算式 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: 757 Solved: 425[Submit] ...