Angular JS - 在兩個不同的部分提交表格

Question

我有一個表格分爲兩個不同的部分，我希望用戶點擊部分旁邊的「編輯」，然後只提交表格的這一部分。我用jQuery做了很多次這樣的事情，但我對角度來說是一個相當新的東西，我找不到/想到正確的方法。此外，這需要編程，因爲有更多的輸入和可能更多的部分將被添加到窗體。任何幫助非常感謝，謝謝！

編輯： 只是爲了澄清，我的問題是：我怎麼能提交表單，但只發布該輸入的第一行，或者只輸入

編輯第二行：

好吧，這是我最新的想法，如何做到這一點...

我想發送一個表格在兩個不同的部分。我認爲我可以在一個單獨的控制器中包裝表單的每個部分，然後在稱爲「sendForms」的工廠/服務（這些工作是正確的方式，工廠還是服務？）內執行$ http請求，然後設置表單數據到工廠/服務中的this.formData。然後對所有輸入使用ng-model =「formData」，並在表單元素上使用ng-submit =「sendForms」。我在正確的軌道上嗎？我沒有更新代碼看起來像這樣呢。

<div ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
     <form id="edit_profile" ng-submit="processForm()"> 
      <fieldset> 
       <div class="row"> 
        <div class="col-md-5 form-group input-text"> 
         <label>First Name</label> 
         <input id="first_name" name="first_name" 
           type="text" ng-disabled="toggleinput" 
           class="act_setting" 
           ng-model="userDetails.first_name"> 
        </div> 
        <div class="col-md-5 form-group input-text"> 
         <label>Last Name</label> 
         <input id="last_name" name="last_name" 
           type="text" ng-disabled="toggleinput" 
           class="act_setting " 
           ng-model="userDetails.last_name"> 
        </div> 

       </div> 
       <div class="row"> 
        <div class="col-md-5 form-group input-text"> 
         <label>Address 1</label> 
         <input id="address1" name="address1" type="text" 
           ng-disabled="toggleinput" 
           class="act_setting " 
           ng-model="userDetails.address1" > 
        </div> 

        <div class="col-md-5 form-group input-text"> 
         <label>Address 2</label> 
         <input id="address2" name="address2" type="text" 
           ng-disabled="toggleinput" 
           class="act_setting " 
           ng-model="userDetails.address2"> 
        </div> 
       </div> 

      </fieldset> 
     </form> 
    </div> 
</div> 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> 
<script language="javascript"> 
    var app = angular.module('myApp', ['ui.bootstrap', 'angular-loading-bar', 'ngAnimate', 'ngSanitize', 'ui.select']); 
    app.controller('myCtrl', function ($scope,$rootScope,$filter,$http) { 
     $scope.toggleinput = false; 
     $scope.userDetails = { 
      "user_id": "1", 
      "address_id": "1", 
      "first_name": "patrick", 
      "last_name": "lawler", 
      "email": "test@mail.com", 
      "dob": "1991-06-04", 
      "address1": "maple street 5", 
      "address2": "apt 4", 
      "country_code": "104", 
      "state": "illinois", 
      "zip": "987654", 
      "time_added": "2014-11-20 23:42:02", 
      "country_name":"Israel" }; 

      $scope.processForm = function() { 
      $http({ 
       method: 'POST', 
       url: '/profile', 
       data: $.param($scope.userDetails), // pass in data as strings 
       headers: {'Content-Type': 'application/x-www-form-urlencoded'} // set the headers so angular passing info as form data (not request payload) 
      }) 
        .success(function (data) { 
         console.log(data); 
         if (!data.success) { 
          // if not successful, bind errors to error variables 
          console.log('submit errors') 
         } else { 
          // if successful, bind success message to message 
          $scope.message = data.message; 
         } 
        }); 
     }; 
    }); 
</script> 

Answer 1

如果我找到你的權利。
您需要定義兩個按鈕，如：

<button ng-click="saveFirst()">Save First</button> 
//define second 
<button ng-click="saveSecond()"></button> 

JS

$scope.saveFirst = function(){ 

$http.post('post_es.php', {'firstname': $scope.userDetails.first_name, 'lastname': $scope.userDetails.last_name} 
        ).success(function(data, status, headers, config) {} 

} 

，並檢查該Site

希望它會幫助你