前面学习了数据绑定指令，现在开始学习内置模板指令。看起来有点多，目测比较好理解。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-内置模板指令的更多相关文章

  1. flask_admin 笔记五 内置模板设置

    内建模板 Flask-Admin是使用jinja2模板引擎 1)扩展内建的模板 不要完全覆盖内置的模板,最好是扩展它们. 这将使您更容易升级到新的Flask-Admin版本. 在内部,Flask-Ad ...

  2. python自动化测试学习笔记-4内置函数，处理json

    函数.全局变量 写代码时注意的几点事项: 1.一般写代码的时候尽量少用或不用全局变量,首先全局变量不安全,大家协作的情况下,代码公用容易被篡改,其次全局变量会一直占用系统内容. 2.函数里如果有多个r ...

  3. 学习笔记——Maven 内置变量

    Maven内置变量说明: ${basedir} 项目根目录(即pom.xml文件所在目录) ${project.build.directory} 构建目录,缺省为target目录 ${project. ...

  4. Python学习笔记-Day3-python内置函数

    python内置函数 1.abs    求绝对值 2.all 判断迭代器中的所有数据是否都为true 如果可迭代的数据的所有数据都为true或可迭代的数据为空,返回True.否则返回False 3.a ...

  5. 【学习】js学习笔记：内置顶层函数eval()的兼容用法

    今天学了一个内置顶层函数,eval();其作用是将字符串转换成javascript命令执行,但必须符合语法,否则会报错. 如果写成window.eval(),则其定义的变量会在全局生效. 但是,在IE ...

  6. java web 学习笔记 jsp内置对象

    jsp2 表达式语言的内置对象 使用方式${object.attributename} 或者${object["attributename"]} pageContext pageS ...

  7. Python学习笔记-常用内置函数

    输出:print() 功能:输出打印 语法:print(*objects, sep=' ', end='\n', file=sys.stdout) 参数:objects----复数,表示可以一次输出多 ...

  8. [Python学习笔记-001] 内置函数getattr()

    如果某个实例foo有多个方法, 当对foo的每一个方法我们都需要使用try ... except ...进行包装的时候,内置函数getattr()可以用来精简代码. 1. getattr()的用法 # ...

  9. python学习笔记011——内置函数pow()

    1 语法 pow(x, y[, z]) x -- 数值表达式. y -- 数值表达式. z -- 数值表达式. 函数是计算 x 的 y 次方,如果 z 在存在,则再对结果进行取模,其结果等效于pow( ...

  10. Python学习笔记011——内置函数exec()

    1 描述 把一个字符串当成语句执行 exec()  执行储存在字符串或文件中的 Python 语句,相比于  eval() , exec() 可以执行更复杂的 Python 代码. exec函数和ev ...

随机推荐

  1. SaberRD之交流分析

    交流分析(AC Analysis)也叫做小信号(Small-Signal)分析,也即分析电路的小信号频率响应,更严谨的定义是:分析工作在直流偏置电压下的非线性电路对于一定频率范围内的输入小信号的系统响 ...

  2. C#Redis 主从复制

    一.前戏 下面的列表清楚的解释了Redis Replication的特点和优势.    1). 同一个Master可以同步多个Slaves.    2). Slave同样可以接受其它Slaves的连接 ...

  3. 第八讲：I/O虚拟化

    一.I/O虚拟化的产生 服务器单个千兆以太网端口肯定能够支持单个应用,但是当被分割为10个.15个或者更多的服务器负载时(这其中包括网络.存储以及服务器之间的流量)可能就不够用了. 当遇到I/O瓶颈时 ...

  4. 转：frame和iframe的区别

    1.frame不能脱离frameSet单独使用,iframe可以: 2.frame不能放在body中:如下可以正常显示: <!--<body>--> <frameset ...

  5. JavaScript中定义变量和存储值的类型判断

    以严谨的语法表示作为前提 首先变量被定义,然后给变量赋予一定的值,变量真正的作用就是存储值 变量的定义和赋值 变量的定义: var a 使用关键字var+变量名表示定义一个变量 a 变量的赋值: va ...

  6. Android中使用Handler以及CountDownTimer实现包含倒计时的闪屏页面

    上一篇博文<Android中Handler使用浅析>通过实现倒计时闪屏页面的制作引出了Handler的使用方法以及实现原理,博文末尾也提到了实现过程中的Bug,有兴趣的朋友可以点击链接回去 ...

  7. 使用curl操作InfluxDB

    这里列举几个简单的示例代码,更多信息请参考InfluxDB官方文档: https://docs.influxdata.com/influxdb/v1.1/ 环境: CentOS6.5_x64Influ ...

  8. Strtus2 S2-045漏洞

    S2-045漏洞已经爆发几天了,但还很多网址都存在此漏洞,很多金融类网站也收到了保护费通知...唉,收保护费少,报警无效!只能酌情处理了!做黑产的,还是少做为秒,常在河边站哪有不湿鞋,劝各位早日金盆洗 ...

  9. ACM Fibonacci数 计算

    Fibonacci数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 无穷数列1,1,2,3,5,8,13,21,34,55...称为Fibonacci数列,它可以递 ...

  10. Gridview 重建表头/单击单元格弹出对话框/改变单元格背景色

    整理工作~ 完整的代码在GitHub上, 路径: 项目背景:追踪某个issue,并且记录每天的状态. 要求:1.点击日期就能更改,并且用颜色标志不同的状态 2.增加按钮可关闭issue 3.布局要求日 ...