AngularJS ng-model 指令

ng-model 指令將 HTML 控件（input、select、textarea）的值綁定到應用程序數據。

ng-model 指令

使用 ng-model 指令，您可以將輸入字段的值綁定到在 AngularJS 中創建的變量。

實例

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.name = "Bill Gates";
});
</script>

親自試一試

雙向綁定

綁定是雙向的。如果用戶更改輸入字段內的值，AngularJS 屬性也會更改其值：

實例

<div ng-app="myApp" ng-controller="myCtrl">
  Name: <input ng-model="name">
  <h1>You entered: {{name}}</h1>
</div>

親自試一試

驗證用戶輸入

ng-model 指令可以為應用程序數據（數字、電子郵件、必填項）提供類型驗證：

實例

<form ng-app="" name="myForm">
  Email:
  <input type="email" name="myAddress" ng-model="text">
  <span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>

親自試一試

在上面的例子中，僅當 ng-show 屬性中的表達式返回 true 時，才會顯示 span。

如果 ng-model 屬性中的屬性不存在，AngularJS 將為您創建一個。

應用程序狀態

ng-model 指令可以提供應用程序數據的狀態（有效、臟、觸摸、錯誤）：

實例

<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
  Email:
  <input type="email" name="myAddress" ng-model="myText" required>
  <h1>Status</h1>
  {{myForm.myAddress.$valid}}
  {{myForm.myAddress.$dirty}}
  {{myForm.myAddress.$touched}}
</form>

親自試一試

CSS 類

ng-model 指令根據 HTML 元素的狀態提供 CSS 類：

實例

<style>
input.ng-invalid {
  background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
  Enter your name:
  <input name="myName" ng-model="myText" required>
</form>

親自試一試

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

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