AngularJSAngularJS1.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>

 

AngularJS 1 

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

 

 

 

 

 

 

 

 

 

  这里不开实验了,做只表用的时刻方便查。

  预告:接下去读事件令!好感动,又学完一个点。加油加油!先倒一下!

相关文章