AngularJS學習筆記（四）內置指令

時間  2019-11-08
標籤 angularjs 學習 筆記 內置 指令 欄目 AngularJS 简体版
原文   原文鏈接

說說指令

不得不讚嘆，指令是ng最爲強大的功能之一，好吧，也能夠去掉之一，是最強大的功能。ng內置了許多自定義的指令，這避免了咱們本身去造輪子。同時，ng也提供了自定義指令的功能，可讓咱們的頁面元素標籤更加實例化。javascript

內置的指令不少，至少40-50個吧。咱們在學習的時候，有兩種思路，一種是先做題，遇到不會的就去問；還有一種就是先把書都看了，而後再作題。這兒呢，咱們就先介紹大概的類別，至於細節指令，咱們線下自我修行吧。css

1.必需要會的指令

（1）ng-apphtml

一個頁面僅能有第一個ng-app起做用，因此頁面最好是將ng-app寫到html根元素上，這樣全部的元素就都歸ng管啦。java

（2）ng-controllerbootstrap

一個頁面能夠有多個ng-controller，有一個Controller，也就意味着多了一個隔離區域。通常來講，Controller負責經過服務進行CRUD操做，並將數據或結果綁定在Controller的$scope上。app

（3）ng-modeldom

咱們在上一篇也見過這個指令，<input type=’textbox’ ng-model=’name’ />，此處的含義是：將Controller中$scope的name綁定到此元素上，若是此元素內容變化，則必然會修改$scope.name的值ssh

（4）{{}}和ng-bindide

這倆指令功能相似，都是將Controller中$scope上的值（例如name）綁定到顯示元素上的。學習

二者的區別是：若是使用{{}}，頁面在加載的瞬間，用戶有可能會看到還沒有綁定數據的源碼狀態，而ng-bind則不存在此問題。不過沒必要所以困擾，用哪一個均可以，也就是那麼一瞬間嗎。

     hello,{{name}}
     <hr>
     hello,<span ng-bind='name'></span>

2.樣式相關的指令

（1）ng-class

ng-class能夠設置爲{key:value}對象，當value爲真時，key所對應的樣式啓做用。

<!DOCTYPE html>

<html ng-app="App">
<head>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

        var App = angular.module("App", []);

        App.controller("ctrl", function ($scope) {
            
            $scope.isbk=false;
            $scope.isft=false;
            
        });
        
    </script>
    <style type='text/css'>
      .bkcolor
        {
            background-color:green;
        }
        
        .ftcolor
        {
            color:red;
        }
    </style>
</head>
    <body>
        <div ng-controller ="ctrl">
            <input type='checkbox' ng-model='isbk' />使用background
            <input type='checkbox' ng-model='isft'/>使用frontcolor
            <div ng-class='{bkcolor:isbk, ftcolor:isft}'>
                測試
              </div>
        </div>
    </body>
</html>

查看效果：

jdfw1

點擊這裏測試運行效果。

（2）ng-class-even,ng-class-odd

這兩個指令和ng-class相似，不過特殊之處是須要配合ng-repeat使用，代碼以下：

<!DOCTYPE html>

<html ng-app="App">
<head>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

    var App = angular.module("App", []);

    App.controller("ctrl", function ($scope) {
            
            $scope.personList = [{
                name:"張三",
                age:30
            },{
                name:"李四",
                age:40
            },{
                name:"王五",
                age:50
            }];

            
        });
        
    </script>
    <style type='text/css'>
      .oddcolor
        {
            background-color:green;
        }
        
        .evencolor
        {
            background-color:red;
        }
    </style>
</head>
    <body>
        <div ng-controller ="ctrl">
            <table>
                <tr ng-repeat='person in personList' >
                    <td>{{$index}}</td>
                    <!--注意：此處爲字符串-->
                    <td ng-class-odd="'oddcolor'" ng-class-even="'evencolor'">{{person.name}}</td>
                    <td ng-class-odd="'oddcolor'" ng-class-even="'evencolor'">{{person.age}}</td>
                </tr>
            </table>
        </div>
    </body>
</html>

顯示效果：

image

點擊這裏查看效果。

（3）ng-style

只需給ng-style賦值給style的對象就ok，見代碼：

<!DOCTYPE html>

<html ng-app="App">
<head>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

    var App = angular.module("App", []);

    App.controller("ctrl", function ($scope) {
            
            $scope.style={color:'red'};
            
        });
        
    </script>
</head>
    <body>
        <div ng-controller ="ctrl">
            <div ng-style='style'>
                測試
            </div>
        </div>
    </body>
</html>

效果：

image

點擊這裏查看效果。

（4）ng-show/ng-hide

這是兩個經常使用的指令，對應的值爲true或false。當爲true的時候，對應的指令生效，對應的css是display: block和display:none。

<!DOCTYPE html>

<html ng-app="App">
<head>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

    var App = angular.module("App", []);

    App.controller("ctrl", function ($scope) {
            
            $scope.isshow = false;
            
        });
        
    </script>
</head>
    <body>
        <div ng-controller ="ctrl">
            <input type="checkbox" ng-model="isshow"/>顯示
            <div ng-show="isshow">
                顯示的內容。
            </div>
        </div>
    </body>
</html>

運行效果：

jdfw2

點擊這裏查看效果。

3.表單指令

既然是表單指令，天然是指input、select、form等指令，還包括一些表單元素的狀態指令。下面這個例子介紹一個登錄窗口，當用戶名或密碼爲空時進行提示，並登陸按鈕不可用。

這其中要用到input指令和form指令，咱們須要參考AngularJS的API使用這些指令的屬性，下面來看例子吧。

<!DOCTYPE html>

<html ng-app="App">
<head>
    <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/bootstrap.css">
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

        var App = angular.module("App", []);

        App.controller("ctrl", function ($scope) {

            $scope.loginInfo = {
                name: "",
                pwd: ""
            };

            $scope.login = function () {
                alert("登錄名：" + $scope.loginInfo.name + "\n登錄密碼：" + $scope.loginInfo.pwd + "\n執行登錄驗證！");
            }

        });
    </script>
</head>
    <body style='padding-top:10px;'>
        <div class='container' ng-controller="ctrl">
        <!--form需有name屬性-->
        <form name='loginform' class="form-horizontal">
            <div ng-class="{'form-group':true,'has-success':loginform.username.$valid,'has-error':!loginform.username.$valid}">
                <label class='col-md-2 control-label'>登錄名：</label>
                <div class='col-md-7'>
                    <!--input元素需有name屬性，注意：name屬性和ng-model綁定 -->
                    <!--此處使用了 required、minlength、maxlength屬性 -->
                    <input type="text" class="form-control" name='username' ng-model='loginInfo.name' required ng-minlength="3" ng-maxlength="10">
                </div>
                <!--注意：此處使用的是form的name屬性和input元素的name屬性 -->
                <label class='col-md-3 control-label'>
                    <span ng-show='loginform.username.$error.required'>
                        登錄名不能爲空。
                    </span>
                    <span ng-show="loginform.username.$error.minlength">
                        登陸名不能小於3個字符
                    </span>
                    <span ng-show="loginform.username.$error.maxlength">
                        登陸名不能大於10個字符
                    </span>
                </label>
            </div>
            <div ng-class="{'form-group':true,'has-success':loginform.userpwd.$valid,'has-error':!loginform.userpwd.$valid}">
                <label class='col-md-2 control-label'>密碼：</label>
                <div class='col-md-7'>
                    <input type="password" class="form-control" name='userpwd' ng-model='loginInfo.pwd' required>
                </div>
                <label class='col-md-3 control-label' ng-show="loginform.userpwd.$error.required">
                    密碼不能爲空。
                </label>
            </div>
            <div class="form-group">
                <div class='col-md-offset-2 col-md-10'>
                    <!--注意：此處使用ng-submit和ng-disabled-->
                    <input type="submit" class='btn btn-primary' value="登陸" ng-click="login();" ng-disabled="!loginform.$valid" />
                    <button class='btn btn-danger'>
                        取消
                    </button>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    loginform.username.$valid = {{loginform.username.$valid}}
                </div>
                <div class="col-md-offset-2 col-md-10">
                    loginform.username.$error = {{loginform.username.$error}}
                </div>
                <div class="col-md-offset-2 col-md-10">
                    loginform.$valid = {{loginform.$valid}}
                </div>
                <div class="col-md-offset-2 col-md-10">
                    loginform.$error = {{loginform.$error}}
                </div>
            </div>
        </form>
    </div>
    </body>
</html>

看看效果：

jdfw4

點擊這裏查看效果。表單指令較多，此處簡單介紹通常經常使用指令，深刻的和其餘的讓咱們線下本身學習吧。

4.邏輯指令

（1）ng-repeat

ngRepeat指令爲集合中的每項實例化一個模板。每一個模板的實例擁有本身的域，使用循環變量指向當前集合項上，$index指向當前項的索引或鍵值。它有一些經常使用的屬性：$index、$first、$middle、$last、$odd、$even。

<!DOCTYPE html>

<html ng-app="App">
<head>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

    var App = angular.module("App", []);

    App.controller("ctrl", function ($scope) {
            
            $scope.personList = [{
                name:"張三",
                age:30
            },{
                name:"李四",
                age:40
            },{
                name:"王五",
                age:50
            }];
            
        });
    </script>
    
</head>
    <body>
        <div ng-controller ="ctrl">
            <ul>
                <li ng-repeat='person in personList'>
                    姓名：{{person.name}},年齡：<span ng-bind='person.age'></span>
                </li>
            </ul>
        </div>
    </body>
</html>

運行效果：

image

點擊這裏查看。

（2）ng-if

ngIf指令基於{表達式}來移除或重建DOM樹的一部分。若是賦給 ngIf的表達式計算結果爲假，元素會從DOM移除，其它狀況會複製一份元素插入到DOM中。

查看效果：

jdfw

點擊這裏查看效果。

乍一看，這效果和上面那個ng-show和ng-hide有點類似麼。確實，從圖片效果看，倒是如此，可是ng-show和ng-hide只是將display屬性設置爲block或null，而ng-if則是將該dom元素移除或增長上的，具體看下圖：

jdfw

（3）ng-switch

ngSwitch指令用於根據域表達式在你的模板上按條件切換DOM結構。

查看代碼：

<!DOCTYPE html>

<html ng-app="App">
<head>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/394/xjz9g1bv/angular.js"></script>
    <script type="text/javascript">

    var App = angular.module("App", []);

    App.controller("ctrl", function ($scope) {
            
              $scope.switchValue = 1;
        });
        
    </script>
</head>
    <body>
        <div ng-controller ="ctrl">
            <input type='radio' value='1' ng-model='switchValue' />1
            <input type='radio' value='2' ng-model='switchValue' />2
            <input type='radio' value='3' ng-model='switchValue' />3
            <input type='radio' value='4' ng-model='switchValue' />4
            <div>
                選擇的值 {{switchValue}}
            </div>
            <div ng-switch="switchValue">
                <div ng-switch-when='1'>
                    個人值是1
                </div>
                <div ng-switch-when='2'>
                    個人值是2
                </div>
                <div ng-switch-when='3'>
                    個人值是3
                </div>
                <div ng-switch-default>
                    我是default
                </div>
            </div>
        </div>
    </body>
</html>

查看效果：

jdfw

在上圖，咱們也能夠看到，隨着選擇值的不一樣，ng-switch也在不停的增刪dom。點擊這裏查看效果。

5.事件指令

事件指令也是一個你們族呀，經常使用的有這些呀：ng-change、ng-dblclick、ng-mousedown、ng-mouseenter、ng-mouseleave、ng-mousemove、ng-mouseover、ng-mouseup、ng-submit啊。

不過只是對經常使用的事件作了封裝，很好使用，上面的例子中用到了ng-click，小夥伴，你可get到了，這兒就不寫例子啦。

小結

指令的內容真的很是多，很是多，這篇文章看到這兒，你應該已經大體瞭解了內置指令的應用，像開頭說的，之後你用到哪一個指令，就好好的學習哪一個指令吧。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程