angular指令大全 - diligenceday－IT工程師數位筆記本

文章出處

　　這篇文章的案例都是來自官方，引用的cdn來自bootcss，因為angular的官方網站被屏了，所以要翻，不過我把整個文檔下回來了，方便大家下載可以點擊： 打開下載英文版

　　angular的指令

　　a標簽（也就是html的錨標簽）；

　　angular的所有事件直接綁定在元素的上，而且事件都是以“ng-****”開頭，比如ng-click，ng-keydown，ng-keypress，ng-mouseover....

　　基本的綁定事件代碼，點擊a標簽會觸發該控制器內部$scope的alert事件;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="app-controller">
    //我們先來看angular的默認的指令
    a標簽（也就是html的錨標簽）；
    <a href="" ng-click="alert(1)">a標簽</a>
    <script>
        var app = angular.module("app",[]);
        app.controller("app-controller", function($scope){
            console.log( $scope );
            $scope.alert = function() {
                alert(2)
            };
        })
    </script>
</body>
</html>

　　form標簽

　　form標簽的默認屬性比較多, 基本上HTML所有的標簽都被angular的默認指令擴展了，所以dom元素有很多多出來的屬性可以用，$form.$valid是指這個表單內部的所有元素是否可以通過校驗，$ngDirty, $ngInvalid, $ngPristine等;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="formExample">
<script>
    angular.module('formExample', [])
            .controller('FormController', ['$scope', function($scope) {
                $scope.userType = 'guest';
            }]);
</script>
<style>
    .my-form {
        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
        background: transparent;
    }
    .my-form.ng-invalid {
        background: red;
    }
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
    userType: <input name="input" ng-model="userType" required><br>
    <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
    nono_model: <input name="nono" ng-model="nono_model" required><br>
    <tt>userType = {{userType}}</tt><br>
    <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
    <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
    <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
    <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
    <tt>myForm input is nono $valid {{myForm.nono.$valid}}</tt>
</form>

</body>
</html>

　　表單兩種不同的狀態如圖;

　　input也有很多的angular屬性, ng-model是必須的，如果input有name屬性那么，我們直接通過formName.inputName獲取該元素，ngMinLength,，ngMaxLength，ng-parttern，通過正則判斷input是否匹配，ngChange，這個是一個事件屬性，實例：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="inputExample">

    <script>
        angular.module('inputExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.user = {name: 'guest', last: 'visitor'};
                }]);
    </script>

    <div ng-controller="ExampleController">
        <form name="myForm">
            User name: <input type="text" name="userName" ng-model="user.name" required>
            <span class="error" ng-show="myForm.userName.$error.required">
          Required!</span><br>
            Last name: <input type="text" name="lastName" ng-model="user.last" ng-minlength="3" ng-maxlength="10">
            <span class="error" ng-show="myForm.lastName.$error.minlength">
          Too short!</span>
            <span class="error" ng-show="myForm.lastName.$error.maxlength">
          Too long!</span><br>
        </form>
        <hr>
        <tt>user = {{user}}</tt><br/>
        <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
        <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
        <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
        <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
        <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
        <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
    </div>

</body>
</html>

　　input[checkbox]，是checkbox的input元素跟input是不一樣的，有了ng-false-value，ng-true-value這兩個屬性：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="checkboxExample">
    <script>
        angular.module('checkboxExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.value1 = true;
                    $scope.value2 = 'YES'
                }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
        Value1: <input type="checkbox" ng-model="value1"> <br/>
        Value2: <input type="checkbox" ng-model="value2"
                       ng-true-value="'YES'" ng-false-value="'NO'"> <br/>
        <tt>value1 = {{value1}}</tt><br/>
        <tt>value2 = {{value2}}</tt><br/>
    </form>
</body>
</html>

　　ng-ture-value意思是如果這個input被選中，那么這個input對應的ng-model的值為ng-true-value，上面的代碼對應的輸出如下圖；

　　input[date], 日期屬性, 可以設置min和max：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="dateInputExample">
    <script>
        angular.module('dateInputExample', [])
                .controller('DateController', ['$scope', function($scope) {
                    $scope.value = new Date(2013, 9, 22);
                }]);
    </script>
    <form name="myForm" ng-controller="DateController as dateCtrl">
        Pick a date in 2013:
        <input type="date" id="exampleInput" name="input" ng-model="value"
               placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
       <span class="error" ng-show="myForm.input.$error.required">
           Required!</span>
       <span class="error" ng-show="myForm.input.$error.date">
           Not a valid date!</span>
        <tt>value = {{value | date: "yyyy-MM-dd"}}</tt><br/>
        <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
        <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    </form>
</body>
</html>

　　日期設置了max和min，所以只能選擇指定區間的日期：

　　還有emai類型的inputDemo：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="emailExample">
    <script>
        angular.module('emailExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.text = 'me@example.com';
                }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
        Email: <input type="email" name="input" ng-model="text" required>
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.email">
        Not valid email!</span>
        <tt>text = {{text}}</tt><br/>
        <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
        <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
        <tt>myForm.$error.email = {{!!myForm.$error.email}}</tt><br/>
    </form>
</body>
</html>

　　input[radio]，這種輸入類型有兩種屬性，第一種是value，對應的是ng-model的值，第二種是ngValue，對應的是$scope內部的變量值：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="radioExample">
    <script>
        angular.module('radioExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.color = 'blue';
                    $scope.specialValue = {
                        "id": "12345",
                        "value": "green"
                    };
                }]);
    </script>
    <form name="myForm" ng-controller="ExampleController">
        <input type="radio" ng-model="color" value="red">  Red <br/>
        <input type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
        <input type="radio" ng-model="color" value="blue"> Blue <br/>
        <tt>color = {{color | json}}</tt><br/>
    </form>
    Note that `ng-value="specialValue"` sets radio item's value to be the value of `$scope.specialValue`.
</body>
</html>

　　input還有很多類型,比如input[text],input[url],input[week],input[month],input[number],angular給不同的input添加了不同的屬性，不一一羅列了;

　　ngApp 這個自定義指令很重要，我們上面的所有DEMO都在body元素上添加了ng-app屬性，添加了ng-app屬性的元素會自動加載到angular模塊里面去，所以我們就不要寫angular.bootstrap(element, ["moduleName"])，但是自動加載的ng-app在一個頁面只能有一個，兩個或者更多就會出現問題, 那么能才能在一個html文件添加多個angular模塊呢，可以得，但是我們不給元素設置ng-app屬性，我們手動通過angular.bootstrap加載模塊；

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body>
<div  id="ap0">
    <div ng-controller="app0-c">
        {{a}}
    </div>
</div>
<div  id="ap1">
    <div ng-controller="app1-c">
        {{a}}
    </div>
</div>
<script>
    angular.module("app0",[]).controller("app0-c",function($scope){
        $scope.a = 0;
    });
    angular.module("app1",[]).controller("app1-c",function($scope){
        $scope.a = 1;
    });

    angular.bootstrap( document.getElementById("ap0") ,["app0"]);
    angular.bootstrap( document.getElementById("ap1"), ["app1"] )
</script>
</body>
</html>

　　ok，界面顯示一個0，還有一個1，我們在一個html文件里面啟動了兩個不關聯的app了

　　angular的ng-bind指令, 這個指令是指ng-bind的值就是這個元素的textContent或者是innerText;ng-bind對應的一個ng-bind-html， ng-bind-html指的是ng-bind-html的值為這個元素的innerHTML, 要注意的是ng-bind-html依賴了一個叫做angular-sanitize的模塊，所以要手動導入這個JS，要么會報錯

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-sanitize.min.js"></script>
</head>
<body>
    <script>
        angular.module('bindExample', ["ngSanitize"])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.name = 'Whirled';
                    $scope.myHTML = 'I am an <code>HTML</code>string with ' +
                            '<a href="#">links!</a> and other <em>stuff</em>';
                }]);
    </script>
    <div id="bindExample" ng-controller="ExampleController">
        Enter name: <input type="text" ng-model="name"><br>
        Hello <span ng-bind="name"></span>!
        <p ng-bind-html="myHTML"></p>
    </div>
    <script>
        angular.bootstrap(document.getElementById("bindExample"),["bindExample"]);
    </script>
</body>
</html>

　　ng-bind-template指令，這個指令跟ng-bind 差不多， ng-bind是指替換元素的textContent為ng-bind的值，ng-bind-template是指替換元素的textContent的值為ng-bind-template經過angular.parse().assign的內容;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="bindExample">
    <script>
        angular.module('bindExample', [])
                .controller('ExampleController', ['$scope', function ($scope) {
                    $scope.salutation = 'Hello';
                    $scope.name = 'World';
                }]);
    </script>
    <div ng-controller="ExampleController">
        Salutation: <input type="text" ng-model="salutation"><br>
        Name: <input type="text" ng-model="name"><br>
        <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
        <p>其實你直接這樣寫也行</p>
        <p>{{salutation}} {{name}}!</p>
        <p>壓根不需要ng-bind-template</p>
    </div>
</body>
</html>

　　ng-if效果跟ng-show一樣，不同的是ng-if如果是false，那么這個元素的dom節點都沒有了，如果為true，那么該節點重新加載到dom；

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="app">
    Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
    Show when checked:
    <span ng-if="checked" class="animate-if">
      I'm removed when the checkbox is unchecked.
    </span>
    <script>
        var APP = angular.module('app', []);
    </script>
</body>
</html>

　　ng-href，如果一個錨點的鏈接是動態的，比如<a href="{{href}}">gogogo</a>，如果你點擊那么界面會調到{{href}},為了動態添加href，那么ng-href就出現了：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="app">
    <input ng-model="value" /><br />
    <a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
    <a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
    <a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
    <a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
    <a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
    <a id="link-6" ng-href="{{value}}">link</a> (link, change location)
    <script>
        var APP = angular.module('app', []);
    </script>
</body>
</html>

　　ng-show，和ng-hide如果元素的ng-show為true，那么元素就顯示，否則就隱藏， ng-hide同理

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body>
    <div ng-app="app">
        Click me: <input type="checkbox" ng-model="checked"><br/>
        <div>
            Show:
            <div class="check-element " ng-show="checked">
                <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
            </div>
        </div>
        <div>
            Hide:
            <div class="check-element " ng-hide="checked">
                <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
            </div>
        </div>
    </div>
    <script>
        var APP = angular.module('app', []);
    </script>
</body>
</html>

　　如果ng-show和ng-hide同時存在一個節點上，那么隱藏和顯示的狀態根據ng-hide展現：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body>
    <div ng-app="app">
        Click me: <input type="checkbox" ng-model="checked"><br/>
        <div>
            Show:
            <div class="check-element " ng-hide="checked" ng-show="checked">
                <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
            </div>
        </div>
    <script>
        var APP = angular.module('app', []);
    </script>
</body>
</html>

　　寫著寫著，chrome居然崩潰了，我勒個去，草稿都沒存；

　　ng-cloak存在完全是為了用戶體驗，如果一個html界面angular.js還沒加載進來，那么界面會有{{}}這樣的標志，如果{{}}標志多了，用戶會一頭霧水啊， ng-cloak如果加在根節點，那么界面的{{}}會被隱藏，等到{{}}完全編譯成動態數據的時候界面才可見；

　　ng-class的用處還是很大的，通過模型綁定，我們根本不需要操作class，ng-class允許三種值：

　　1：對象{bold:true,red:false} 那么bold這個class會生效；

　　2：通過空格區分的字符串；

　　3：一個數組，數組的每一個值都要為一個class即可：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body>
    <style>
        .strike {
            text-decoration: line-through;
        }
        .bold {
            font-weight: bold;
        }
        .red {
            color: red;
        }
    </style>
    <div ng-app="APP">
        <p ng-class="{strike: deleted, bold: important, red: error}">Map Syntax Example</p>
        <input type="checkbox" ng-model="deleted"> deleted (apply "strike" class)<br>
        <input type="checkbox" ng-model="important"> important (apply "bold" class)<br>
        <input type="checkbox" ng-model="error"> error (apply "red" class)
        <hr>
        <p ng-class="style">Using String Syntax</p>
        <input type="text" ng-model="style" placeholder="Type: bold strike red">
        <hr>
        <p ng-class="[style1, style2, style3]">Using Array Syntax</p>
        <input ng-model="style1" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style2" placeholder="Type: bold, strike or red"><br>
        <input ng-model="style3" placeholder="Type: bold, strike or red"><br>
    </div>

    <script>
        angular.module("APP",[]);
    </script>
</body>
</html>

　　ng-include指令是指這個指令標簽的innerHTML為指定的url，這個url為相對與當前目錄的url地址或者絕對地址，angular會通過ajax請求該地址，然后把地址的內容作為指令元素innerHTML填充；

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body>
<div ng-app="includeExample" ng-controller="ExampleController">
    <select ng-model="template" ng-options="t.name for t in templates">
        <option value="">(blank)</option>
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include="template.url"></div>
    <script>
        angular.module('includeExample',[])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.templates =
                            [ { name: 'template1.html', url: 'template1.html'},
                                { name: 'template2.html', url: 'template2.html'} ];
                    $scope.template = $scope.templates[0];
                }]);
    </script>
</div>
</body>
</html>

　　　　ng-list這個指令要和ng-model合起來用，ng-list在輸入框的表現通過split(",")的數組才是實際的model， ng-list默認為","逗號，要設置成自定義的區分符，直接為ng-list賦值即可;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="listExample">
    <form name="myForm" ng-controller="ExampleController">
        List: <input name="namesInput" ng-model="names" ng-list="!" required>
      <span class="error" ng-show="myForm.namesInput.$error.required">
        Required!</span>
        <br>
        <tt>names = {{names}}</tt><br/>
        <tt>myForm.namesInput.$valid = {{myForm.namesInput.$valid}}</tt><br/>
        <tt>myForm.namesInput.$error = {{myForm.namesInput.$error}}</tt><br/>
        <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
        <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
    </form>
    <script>
        angular.module('listExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.names = ['morpheus', 'neo', 'trinity'];
                }]);
    </script>
</body>
</html>

　　ng-model這個指令是很重要的指令，所有學習angular開發者對這個指令都無比熟悉， ng-model主要綁定的元素包括input， select， textarea

　　ng-model的元素都有ng-valid（可用），ng-invalid（不可用）， ng-pristine（用戶為對這個元素進行操作過）， ng-dirty（元素的模型發生改變的話）屬性；這幾個屬性都是布爾值；

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="inputExample">
    <script>
        angular.module('inputExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    $scope.val = '1';
                }]);
    </script>
    <style>
        .my-input {
            -webkit-transition:all linear 0.5s;
            transition:all linear 0.5s;
            background: transparent;
        }
        .my-input.ng-invalid {
            color:white;
            background: red;
        }
    </style>
    Update input to see transitions when valid/invalid.
    Integer is a valid value.
    <form name="testForm" ng-controller="ExampleController">
        <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
    </form>
</body>
</html>

　　ng-pattern：匹配這個輸入框的輸入值是否符合這個正則，如果不匹配，這個元素會被加上ng-invalid的class，如果匹配會被加上ng-valid的class；

　　ng-model還可以指定為一個getersetter，相當于一個preSave，和preGet方法，模型的可控性變好了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="getterSetterExample">
    <div ng-controller="ExampleController">
        <form name="userForm">
            Name:
            <input type="text" name="userName"
                   ng-model="user.name"
                   ng-model-options="{ getterSetter: true }" />
        </form>
        <pre>user.name = <span ng-bind="user.name()"></span></pre>
    </div>
    <script>
        angular.module('getterSetterExample', [])
                .controller('ExampleController', ['$scope', function($scope) {
                    var _name = 'Brian';
                    $scope.user = {
                        name: function (newName) {
                            if (angular.isDefined(newName)) {
                                _name = newName;
                            }
                            return _name+1111;
                        }
                    };
                }]);
    </script>
</body>
</html>

　　ngModelOption ,可以設置ng-model在元素失去焦點的時候更新model

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    <form name="userForm">
        Name:
        <input type="text" name="userName"
               ng-model="user.name"
               ng-model-options="{ updateOn: 'blur' }"
               ng-keyup="cancel($event)" /><br />

        Other data:
        <input type="text" ng-model="user.data" /><br />
    </form>
    <pre>user.name = <span ng-bind="user.name+user.data"></span></pre>
</div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
                $scope.user = { name: 'say', data: '' };

                $scope.cancel = function (e) {
                    if (e.keyCode == 27) {
                        $scope.userForm.userName.$rollbackViewValue();
                    }
                };
            }]);
</script>
</body>
</html>

　　ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng-mouseover, ng-mouseup, ng-click, ng-dblclick都是ng的事件這些事件和dom的事件區別是dom事件的執行作用域是該元素，而angular的事件執行作用域是$scope下，現在可能不明白，以后自然就懂了；

　　ng-paste， ng-copy， ng-cut是一伙的，如果輸入框的值是粘帖的，那么ng-paste就為真， ng-copy，ng-cut也是同理，提供了demo：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    <input ng-paste="paste=true" ng-init="paste=false" placeholder='paste here'>
    pasted: {{paste}}
</div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
            }]);
</script>
</body>
</html>

　　ng-non-bindable指令指該元素的內部{{****}}不被綁定和轉義，不受angular的掌控：

<div>Normal: {{1 + 2}}</div>
<div ng-non-bindable>Ignored: {{1 + 2}}</div>

的輸出值為 == 》》

Normal: 3
Ignored: {{1 + 2}}

　　ng-readonly指令是指ng-model的只讀，不能隨便更改，和ng-disabled差不多， ( •̀ ω •́ )y肯定有區別

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
    <input type="text" ng-readonly="checked" value="I'm Angular"/>
    <br>
    Click me to toggle: <input type="checkbox" ng-model="checked_model"><br/>
    <button ng-model="button" ng-disabled="checked_model">Button</button>
</div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
            }]);
</script>
</body>
</html>

　　ng-open，這個我也認為和ng-open， ng-hide差不多，區別是ng-open只能綁定details元素，（details標簽目前只有webkit瀏覽器支持），當ng-open的值為open那么綁定的details內部的summary元素就顯示

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    Check me check multiple: <input type="checkbox" ng-model="open"><br/>
    <details id="details" ng-open="open">
        <summary>Show/Hide me</summary>
    </details>
</div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
            }]);
</script>
</body>
</html>

　　ng-repeat和（ng-repeat-start，ng-repeat-end）都是循環一個items，區別是ng-repeat-start可以跨越多個標簽，而ng-repeat只能在一個標簽里面循環， ng-repeat-start也很有用，因為可以跨多個標簽，（其實只要把ng-repeat放在ng-repeat-start的父級，可以模擬ng-repeat-start，個人想法....）DEMO:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    使用ng-repeat-start和ng-repeat-end的循環
    <header ng-repeat-start="item in items">
        Header {{ item }}
    </header>
    <div class="body">
        Body {{ item }}
    </div>
    <footer ng-repeat-end>
        Footer {{ item }}
    </footer>

    使用ng-repeat的循環
    <div ng-repeat="item in items">
        {{item}}
    </div>
</div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope){
                $scope.items =  ['A','B'];
            }]);
</script>
</body>
</html>

　　ng-repeat里面提供了幾個變量，為開發者提供一些快捷的操作，

　　　　$index : 表示當前item的索引,

　　　　$first : 如果item為第一個，那么$first為true ,

　　　　$middle : 如果item不是開頭，不是結尾$middle為true,

　　　　$last : 如果item是最后一個， $last為true,

　　　　$even : 如果索引為偶數，那么$even為true,否則為false

　　　　$odd : 同上，索引為奇數$odd為true....;

　　如果你喜歡的話，可以循環對象的key和value，比如

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    <div  ng-repeat="(name, age) in {'adam':10, 'amalie':12}">
        {{name}}+{{age}}
    </div>
</div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope){
            }]);
</script>
</body>
</html>

　　ng-repeat還提供了別的特性，讓循環更加強大，可以這么寫 item in items | filter:x as results，結果filter過濾后的結果會被保存到results，可以這么用：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
<div ng-controller="ExampleController">
    <div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
]">
        I have {{friends.length}} friends. They are:
        <input type="search" ng-model="q" placeholder="filter friends..." />
        <ul class="example-animate-container">
            <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
                [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
            </li>
            <li class="animate-repeat" ng-if="results.length == 0">
                <strong>No results found...</strong>
            </li>
        </ul>
    </div>
</div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope){
            }]);
</script>
</body>
</html>

　　ng-selected這個指令我是不怎么用到，這個指令的值指向一個模型，如果這個模型為真，那么這個ng-selected就是select標簽的當前選中選項

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
Check me to select: <input type="checkbox" ng-model="selected"><br/>
    <select>
        <option>Hello!</option>
        <option id="greet" ng-selected="selected">Greetings!</option>
    </select>
</div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope){
            }]);
</script>
</body>
</html>

　　ng-src這個指令也有用的，界面加載的時候才不管img的標簽src有什么，都會一并加載，如果圖片的src包含了{{****}}這些字符，瀏覽器不會管這是什么東西，在渲染dom樹的時候，會直接請求這個地址，如果想通過{{****}}動態生成img標簽的src，不要用src，要用ng-src。

　　script標簽可以作為ng-include的模板使用，把類型type設置為"text/ng-template":

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
    </head>
<body ng-app="optionsExample">
    <script type="text/ng-template" id="/tpl.html">
        Content of the template.
    </script>

    <a ng-click="currentTpl='/tpl.html'" id="tpl-link">Load inlined template</a>
    <div id="tpl-content" ng-include src="currentTpl"></div>
<script>
    angular.module('optionsExample', [])
            .controller('ExampleController', ['$scope', function($scope){
            }]);
</script>
</body>
</html>

　　ng-switch這個指令相當于通過$scope內部變量控制dom的隱藏和顯示：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <select ng-model="selection" ng-options="item for item in items">
        </select>
        <tt>selection={{selection}}</tt>
        <hr/>
        <div class="animate-switch-container"
             ng-switch on="selection">
            <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
            <div class="animate-switch" ng-switch-when="home">Home Span</div>
            <div class="animate-switch" ng-switch-default>default</div>
        </div>
        
    </div>
<script>
    angular.module('switchExample',[])
            .controller('ExampleController', ['$scope', function($scope) {
                $scope.items = ['settings', 'home', 'other'];
                $scope.selection = $scope.items[0];
            }]);
</script>
</body>
</html>

　　通過ng-switch來控制dom結構，其實這個指令非常強大哦， 相當于是為html代碼提供了ifelse的功能（因為angular的html中不能通過ifelse控制邏輯）：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="switchExample">
    <div ng-controller="ExampleController">
        <div ng-repeat="item in items">
            <div ng-switch="item">
                ——————————————————————
                <div ng-switch-when="settings">Settings Div</div>
                <div ng-switch-when="home">Home Span</div>
                <div ng-switch-default>default</div>
            </div>
        </div>
    </div>
<script>
    angular.module('switchExample',[])
            .controller('ExampleController', ['$scope', function($scope) {
                $scope.items = ['settings', 'home', 'other'];
                $scope.selection = $scope.items[0];
            }]);
</script>
</body>
</html>

　　ng-value這個指令的demo：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="valueExample">
<script>
    angular.module('valueExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
                $scope.names = ['pizza', 'unicorns', 'robots'];
                $scope.my = { favorite: 'unicorns' };
            }]);
</script>
<form ng-controller="ExampleController">
    <h2>Which is your favorite?</h2>
    <label ng-repeat="name in names" for="{{name}}">
        {{name}}
        <input type="radio"
               ng-model="my.favorite"
               ng-value="name"
               id="{{name}}"
               name="favorite">
    </label>
    <div>You chose {{my.favorite}}</div>
</form>
</body>
</html>

　　ng-style指令demo，這個指令接收一個對象，對象的key為css名字，val為樣式的值， val我們可以綁定$scope中的變量：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://cdn.bootcss.com/angular.js/1.3.7/angular.min.js"></script>
</head>
<body ng-app="styleModule">
    <input type="button" value="set color" ng-click="myStyle={color:'red'}">
    <input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
    <input type="button" value="clear" ng-click="myStyle={}">
    <br/>
    <span ng-style="myStyle">Sample Text</span>
    <pre>myStyle={{myStyle}}</pre>
<script>
    angular.module("styleModule",[])
</script>
</body>
</html>

　　周末好快就過完了，睡(￣o￣) . z Z一覺起床上班啦，因為寫的匆忙，有錯別字或者代碼錯誤歡迎指正；

文章列表