Angular JS1學習筆記之一ng-model模型

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輸入框中輸入的值也與$scope變量綁定。

<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