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

希望它会帮助你