Angularjs模型

ng-model 指令

ng-model将数据绑定到HTML控件（input、select 、textarea）的值。

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定

    ng_model指令
    <div ng-app="Myapp" ng-controller="domo1206">
        <input ng-model="names"/>
    </div>
    <script>
        var app = angular.module("Myapp", []).controller("domo1206", function ($scope) {
            $scope.names = "licong";
        })
    </script>

 

应用状态

ng-model 指令可以为应用数据提供状态值(invalid, dirty, touched, error):

 <form name="mydivname">
            验证：
            <input type="email" name="myemail" ng-model="text" />
            <span ng-show="mydivname.myemail.$error.email">不合法的邮件格式</span>
            <h2>邮箱状态</h2>
            valid:<p style="color:red;">{{mydivname.myemail.$valid}}</p>(合法为true)
            dirty:<p style="color:red;">{{mydivname.myemail.$dirty}}</p>(改变值为true)
            touched:<p style="color:red;">{{mydivname.myemail.$touched}}</p>(触屏为true)
        </form>

 

属性	描述
$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

 

CSS 类

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

    <style type="text/css">
        input.ng-invalid {
        font-weight:bold;        
        }
    </style>

 注意：1.input.ng-invalid{}格式不要写错

          2.input标签里面要加上required属性

 

ng-model 指令根据表单域的状态添加/移除以下类：

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