Angular.js Form Example 表單練習

這個表單會展示常用表單元件、基本 Directive 和 Controller 的功能運作。由於網路上有很多大大的教學文章,因此在這裡只記錄一些我在學習 / 實作上遇到的重要觀念。

<form ng-submit="ctrl.submit()">
  <input type="text" ng-model="ctrl.user.username">
  <input type="password" ng-model="ctrl.user.password">
  <input type="submit" value="Submit">
</form>
angular.module('notesApp', []).controller('MainCtrl', [function() {
  var self = this;
  self.submit = function() {
    console.log('User clicked submit with ', self.user);
  };
}]);

Angular.js Form Example 表單練習 - 錯誤訊息

<input type="text" ng-model="ctrl.user.username" required>
<div class="errorMsg" ng-show="profileForm.username.$error.required">This is a required field.</div>

Demo

Angular.js Form Example 表單練習

參考資料


這篇文章的原始位置在這裡-Angular.js Form Example 表單練習

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
標籤: AngularJS
comments powered by Disqus