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

 

 

 

 

 

 

 

 

 

  那里不坚实验了,做个表用的时候方便查。

  预报:接下去学习事件指令!好激动,又学完一个点。加油加油!先活动一下!

相关文章