AngularJS 模型詳細介紹及執行個體代碼

AngularJS 模型詳細介紹及執行個體代碼_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

AngularJS ng-model 指令

ng-model 指令用於繫結應用程式資料到 HTML 控制器(input, select, textarea)的值。

ng-model 指令

ng-model 指令可以將輸入欄位的值與 AngularJS 建立的變數綁定。

AngularJS 執行個體

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {  $scope.name = "John Doe";});</script><p>使用 ng-model 指令來綁定輸入欄位的值到控制器的屬性。</p></body></html>

運行結果：

名字:

使用 ng-model 指令來綁定輸入欄位的值到控制器的屬性。

雙向繫結

雙向繫結，在修改輸入欄位的值時， AngularJS 屬性的值也將修改：

AngularJS 執行個體

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"><h1>你輸入了: {{name}}</h1></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {  $scope.name = "John Doe";});</script><p>修改輸入框的值，標題的名字也會相應修改。</p></body></html>

運行結果：

名字:

你輸入了: John Doe

修改輸入框的值，標題的名字也會相應修改。

驗證使用者輸入

AngularJS 執行個體

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head><body><form ng-app="" name="myForm">  Email:  <input type="email" name="myAddress" ng-model="text">  <span ng-show="myForm.myAddress.$error.email">不是一個合法的郵箱地址</span></form><p>在輸入框中輸入你的郵箱地址，如果不是一個合法的郵箱地址，會彈出提示資訊。</p></body></html>

運行結果：

Email:

在輸入框中輸入你的郵箱地址，如果不是一個合法的郵箱地址，會彈出提示資訊。

CSS 類

ng-model 指令基於它們的狀態為 HTML 元素提供了 CSS 類：

AngularJS 執行個體

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <style>input.ng-invalid {  background-color: lightblue;}</style></head><body><form ng-app="" name="myForm">  輸入你的名字:  <input name="myName" ng-model="myText" required></form><p>編輯文本域，不同狀態背景顏色會發送變化。</p><p>文本域添加了 required 屬性，該值是必須的，如果為空白則是不合法的。</p></body></html>

運行結果：

輸入你的名字:

編輯文本域，不同狀態背景顏色會發送變化。

文本域添加了 required 屬性，該值是必須的，如果為空白則是不合法的。

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

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More