AngularJS: Только пост не пустые значения

Question

Я пытаюсь $ http.post объект JSON из формы. Я не могу найти правильный синтаксис. Предположим, что моя форма принимает только одно значение (имя). Я использую ng-model для привязки имени к объекту с именем modcampaign.name.

Какой правильный синтаксис для отправки этого сообщения в службу http? Кроме того, что, если бы у меня было другое поле ввода, Описание, и только хотите связать это с modcampaign.description , если пользователь вводил данные в поле ввода? Если поле ввода пуст, я хотел бы взять значение для .description из другого объекта (например, modcampaign2.description).

<form ng-submit="modifyCampaign(selCampaign, newName)" class="form-horizontal" name="modCampaign"> 
      <!-- Modify Name --> 
      <div class="form-group"> 
       <label class="col-lg-2 control-label" for="modName">Name</label> 
       <div class="col-lg-8"> 
        <input class="form-control" type="text" id="modName" ng-model="modCampaign.name"/> 
       </div> 
      </div> 
</form> 

Это файл сценария:

var myApp = angular.module('myApp', []); 

myApp.controller('ListController', ['$scope', '$http', function($scope, $http) { 

    $http.get('js/campaigns.json').success(function (data) { 
     $scope.campaigns = data; 
    }); 

    $http.post('js/campaign_mod.json').success(function (data) { 
     data = $scope.modCampaign; 
    }); 

    $scope.selCampaign={}; 
    $scope.selectCampaign = function (campaign) { 
     $scope.toggleCampaign = !$scope.toggleCampaign; 
     $scope.selCampaign = campaign; 
    }; 

    $scope.abbrechen = function() { 
     $scope.toggleCampaign = !$scope.toggleCampaign; 
    }; 

    $scope.submit = function() { 
     $http.post('') 
    } 
}]); 

Answer 1

Вы можете включить что-то вроде этого в контроллере:

$scope.modCampaign = {}; 

    //this gets called on ng-submit 
    $scope.submitData = function(){ 

     $http.post("api-end-point", $scope.modCompaign).success(function(data, status) { 
      //handle response etc. 
     }); 

    } 

Ваш HTML будет иметь что-то вроде этого:

<form ng-submit="submitData()" class="form-horizontal" name="modCampaign"> 
     <!-- Modify Name --> 
     <div class="form-group"> 
      <label class="col-lg-2 control-label" for="modName">Name</label> 
      <div class="col-lg-8"> 
       <input class="form-control" type="text" id="modName" ng-model="modCampaign.name"/> 
       <textarea ng-model="modCampaign.description"/></textarea> 
      </div> 
     </div> 
</form> 

Answer 2

Вы можете использовать JSON.stringify()

пример

$http({ 
method: "POST", 
url: 'http://www.example.com/posturl', 
data : JSON.stringify($scope.modcampaign) 
}).success(function(response){ 
    console.log(response); 
    // write any action after post success 
}) 

Answer 3

<form ng-submit="modifyCampaign(modCampaign)" class="form-horizontal" name="modCampaign"> 
     <!-- Modify Name --> 
     <div class="form-group"> 
      <label class="col-lg-2 control-label" for="modName">Name</label> 
      <div class="col-lg-8"> 
       <input class="form-control" type="text" id="modName" ng-model="modCampaign.name"/> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-lg-2 control-label" for="modDescription">Description</label> 
      <div class="col-lg-8"> 
       <input class="form-control" type="text" id="modDescription" ng-model="modCampaign.description"/> 
      </div> 
     </div> 
</form> 


var myApp = angular.module('myApp', []); 
myApp.controller('ListController', ['$scope', '$http', function($scope, $http) { 
$scope.modifyCampaign = function(modCampaign) { 
    console.log(modCampaign) 
    alert(modCampaign.name) // name:"jane" 
    alert(modCampaign.description) // description: "hello" 
    $http.post('js/campaign_mod.json', { name: modCampaign.name, description: modCampaign.description }).success(function (data) { 
    console.log(data) 
    }); 
} 
}]); 

Этот метод позволяет связать все значения формы к одному объекту, а затем вы можете декодировать значение в файле контроллера, ниже ссылку на рабочий пример http://codepen.io/anon/pen/VjYLvg