Angular JS ng-model指令

ng-model用於繫結應用程式（input、select、textarea）的資料到html的controller裡。
與ng-bind區別在於，input是用於使用者輸入的，資料要用ng-model從View傳輸到Controller中，而{{}}和ng-bind是用於從controller中得到資料然後顯示在view中的。

ng-model指令

ng-model指令可以將輸入的值與AngularJs建立的變數繫結。如下，通過angular.module將我們的應用程式（myApp）繫結到變數app上，同樣，在angular的controller中，我們在input

<div ng-app="myApp" ng-controller="">
    姓名:<input ng-model="name">
    <script>
        var app = angular.module("myApp",[]);
        app.controller('myCtrl',function($scope){
            $scope.name = "John"
        })
    </script>
</div>

雙向繫結

基於上面的程式碼，我們在姓名上面加一行程式碼<h1>你輸入了：{{}}</h1>獲者<h1>你輸入了:<span ng-bind="name"></span></h1>。都可實現修改input輸入框內容，AngularJS屬性的值也將修改，即資料的雙向繫結。

使用者在input框內輸入，ng-model取得資料傳輸到controller，{{}}或ng-bind同時從controller裡取得資料反映到view檢視。

驗證使用者輸入

對以下例項，提示資訊（invalid email）會在ng-show屬性返回true的情況下顯示，初始預設狀態下是隱藏的，多用於表單等。

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">invalid email</span>
</form>

應用狀態

$valid Boolean 告訴我們這一項當前基於你設定的規則是否驗證通過

$invalid Boolean 告訴我們這一項當前基於你設定的規則是否驗證未通過

$pristine Boolean 如果表單或者輸入框沒有使用則為True

$dirty Boolean 如果表單或者輸入框有使用到則為True

$touched Boolean如果元素已經失去過焦點,那這個值就是false.

<form ng-app="" name="myForm2" ng-init="myText='hello sofia'">
    Email:
    <input type="email" name="myAddress" ng-model="myText" required>
    <h1>狀態：</h1>
    驗證規則是否通過：{{myForm2.myAddress.$valid}}<br/>
    表單是否用到：{{myForm2.myAddress.$dirty}}<br/>
    焦點：{{myForm2.myAddress.$touched}}
</form>

CSS 類

ng-model指令基於它們的狀態為HTML元素提供了CSS類，如下，設定了required屬性，表示輸入框是必填否則為空是不合法的對於驗證框我們設定了CSS樣式，不同狀態，背景顏色會發送變化：

<style>input.invalid{background-color:lightbue;}</style>
<form>
    輸入你的名字：<input name="myName" ng-model="name" required type"text">
</form>

Tips

ng-model指令根據表單域的狀態新增/移除以下類：

• ng-empty
• ng-not-empty
• ng-touched
• ng-untouched
• ng-valid
• ng-invalid
• ng-dirty
• ng-pending
• ng-pristine