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)