AngularJS 表單

2018-03-28 14:34 更新

AngularJS 表單

AngularJS 表單是輸入控件的集合。

HTML 控件

以下 HTML input 元素被稱為 HTML 控件:

  • input 元素
  • select 元素
  • button 元素
  • textarea 元素

HTML 表單

HTML 表單通常與 HTML 控件同時(shí)存在。

AngularJS 表單實(shí)例

function ExampleController($scope) { $scope.master = {"firstName":"John","lastName":"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); };

First Name:

Last Name:


form = {{user}}

master = {{master}}

應(yīng)用程序代碼

<div ng-app="" ng-controller="formController">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
function formController ($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
};
</script>

嘗試一下 ?

Note HTML 屬性 novalidate 用于禁用瀏覽器的默認(rèn)驗(yàn)證。

實(shí)例解析

AngularJS ng-model 指令用于綁定 input 元素到模型中。

模型對(duì)象 master 的值為 {"firstName" : "John", "lastName" : "Doe"}。

模型函數(shù) reset 設(shè)置了模型對(duì)象 user 等于 master。

相關(guān)文章

HTML 表單

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)