AngularJS 模型 - ANGULAR教程

首页 / 教程 / AngularJS 教程 / AngularJS 模型 - ANGULAR教程

AngularJS ng-model 指令

ng-model 指令

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

示例代码 
<divng-app="myApp"ng-controller="myCtrl">名字:<inputng-model="name"></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {$scope.name= "John Doe";});</script>

双向绑定

双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

示例代码 
<divng-app="myApp"ng-controller="myCtrl">名字:<inputng-model="name"><h1>你输入了:{{name}}</h1></div>

验证用户输入

示例代码 
<formng-app=""name="myForm">Email:<inputtype="email"name="myAddress"ng-model="text"><spanng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span></form>

以上实例中，提示信息会在 ng-show 属性返回 true 的情况下显示。

应用状态

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

示例代码 
<formng-app=""name="myForm"ng-init="myText = '[email protected]'">Email:<inputtype="email"name="myAddress"ng-model="myText"required><p>编辑邮箱地址，查看状态的改变。</p><h1>状态</h1><p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p><p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p><p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

CSS 类

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

示例代码 
<style>input.ng-invalid{background-color:lightblue;}</style><body><formng-app=""name="myForm">输入你的名字:<inputname="myAddress"ng-model="text"required></form>

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

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