AngularJs 模型

AngularJs ng-model 指令

ng-model 指令：

1.用於將輸入域的值綁定到應用程序數據上;

2.用於綁定應用程序數據到HTML控制器.

ng-model 指令能夠將輸入域的值與 AngularJS 建立的變量綁定。

    <div ng-app="myApp" ng-controller="myCtrl">
        <label for="">名字：<input ng-model="name"></label>
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.name = "Jonhn Doe";
        })
    </script>

雙向數據綁定：

    <div ng-app="myApp" ng-controller="myCtrl">
        <label for="">名字：<input ng-model="name"></label>
        <h1>你輸入了：{{name}}</h1>
    </div>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            
        })
    </script>

驗證用戶輸入：

    <form action="" ng-app="myApp" ng-controller="myCtrl" name="myForm">
        <input type="email" name="myAddress" ng-model="text">
        <span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span>
    </form>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){

        })
    </script>

提示信息會在 ng-show 屬性返回 true 的狀況下顯示.

應用狀態：

ng-model指令能夠爲應用數據提供狀態值(invalid,dirty,touched,error):

　　<form action="" ng-app="myApp" ng-controller="myCtrl" name="myForm">
        <input type="email" name="myAddress" ng-model="myText" required>
        <p>編輯郵箱地址，查看相應的狀態</p>
        <p>
           valid: {{myForm.myAddress.$valid}}(若是輸入值是合法的，則爲true)
        </p>
        <p>
           dirty: {{myForm.myAddress.$dirty}}(若是值改變，則爲true)
        </p>
        <p>
           touched: {{myForm.myAddress.$touched}}(若是經過觸屏點擊，則爲true)
        </p>
    </form>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){

        })
    </script>

css類：

　　<style> 
        input.ng-invalid{
            background:skyblue;
        }
        input.ng-valid{
            background:greenyellow;
        }
　　</style>
　　<form action="" ng-app="" ng-name="myForm">
        輸入你的名字：
        <input type="text" name="myName" ng-model="myText" required>
        <p>編輯文本域，不一樣狀態背景顏色會發送變化。</p>
        <p>文本域添加了 required 屬性，該值是必須的，若是爲空則是不合法的。</p>
   </form>

ng-model指令根據表單域的狀態添加/移除如下類：

ng-empty

ng-not-empty

ng-touched($touched 若是經過觸屏點擊，則爲true)

ng-untouched

ng-valid($valid 若是沒有錯誤/合法，值是true)

ng-invalid($invalid 若是有錯誤/不合法，值是true)

ng-dirty($drity 若是用戶已經進行過交互，值是true)

ng-pending

ng-pristine($pristine 若是用戶尚未進行過交互,值是true)