AngularJS?表單

HTML 控件

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

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

HTML 表單

HTML 表單通常與 HTML 控件同時存在。

<div ng-app="myApp" ng-controller="formCtrl"><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> var app = angular.module('myApp', []); app.controller('formCtrl', function($scope) {$scope.master = {firstName: "John", lastName: "Doe"};$scope.reset = function() {$scope.user = angular.copy($scope.master);};$scope.reset(); }); </script>

實例解析

ng-app?指令定義了 AngularJS 應(yīng)用。

ng-controller?指令定義了應(yīng)用控制器。

ng-model?指令綁定了兩個 input 元素到模型的?user?對象。

formCtrl?函數(shù)設(shè)置了?master?對象的初始值，并定義了?reset()?方法。

reset()?方法設(shè)置了?user?對象等于?master?對象。

ng-click?指令調(diào)用了?reset()?方法，且在點擊按鈕時調(diào)用。

novalidate 屬性在應(yīng)用中不是必須的，但是你需要在 AngularJS 表單中使用，用于重寫標準的 HTML5 驗證。

轉(zhuǎn)載于:https://www.cnblogs.com/dehuachenyunfei/p/6739898.html

總結(jié)

以上是生活随笔為你收集整理的AngularJS学习篇（十六）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。