angular Model 指令

ng-model指令用于绑定应用程序数据到HTML控制器(input、select、textarea)的值。可以将输入域的值域AngularJS创建的变量绑定;并且支持双向绑定。如下例子:

<div ng-app="myapp" ng-controller="mycontroller">

name:<input ng-model="name">

<h1>you input value is:{{name}}</h1>

</div>

<script>

var app=angular.module('myapp',[]);

app.controller('mycontroller',function($scope){

$scope.name='Qiang Li';

});

</script>

验证用户输入

ng-shw会在返回true的情况下显示。如下例子

<form ng-app="" name="myform">

Email:<input type="email" name="myAddress" ng-model="text"></input>

<span ng-show="myform.myAddress.$error.email">invalid</span>

</form>

应用状态

ng-model指令可以为应用程序提供状态值(invalid、dirty、error)

CSS类

ng-model指令基于它们的状态为HTML元素提供了CSS类,可以添加或移除的类有:

ng-empty:

ng-not-empty

ng-touched:用户是否和控件进行了交互、或者是是否失去焦点

ng-untouched:用户是否没有和控件进行了交互、或者是否没有失去焦点

ng-valid:未通过验证的表单;

ng-invalid:表单 是否通过验证

ng-dirty:是否修改了表单

ng-pending:任何满足$asyncValidatorsd情况

ng-pristine:控件是否为初始值

用法如下:

<style>

input.ng-invalid{

background-color:ligthtbule;

}

</style>

<body>

<form ng-app="" name="myform">

the name inputed:<input name="myAddress" ng-model="text" required></input>

</form>

</body>

原文地址:https://www.cnblogs.com/VARForrest/p/7773371.html