一、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	为奇数元素设置样式

　　这里不做实验了，做个表用的时候方便查。

　　预告：接下来学习事件指令！好激动，又学完一个点。加油加油！先活动一下！