AngularJS實現的表單編輯提交功能簡單介紹

antzone發表於2017-04-01

大家知道AngularJS具有強大的表單編輯提交功能,下面就是一段相關的程式碼例項片段。

需要的朋友可以做一下參考,直接看程式碼:

[JavaScript] 純文字檢視 複製程式碼
<!-- AngularJS controller -->
var formApp = angular.module('formApp', []);
function formController($scope, $http) {
  $scope.formData = {'name':'張三','remark':'備註'};
  $scope.myForm = function() {
    $http({
      method  : 'POST',
      url     : '/role/edit',
      data    : $.param($scope.formData),  // pass in data as strings
      // set the headers so angular passing info as form data (not request payload)
      headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  
    }).success(function(data) {
      console.log(data);
      if (!data.success) {
      } 
          else {}
    });
  };
}

下面是對應調整的html程式碼:

[HTML] 純文字檢視 複製程式碼
<!--對應form裡的input調整-->
<input type="text" name="name" ng-model="formData.name" class="form-control" placeholder="Role Name">

相關文章