Question

我正在尝试$ http.post来自表单的JSON对象。我似乎无法找到正确的语法。我们假设我的表单只有一个值（名称）。我使用ng-model将名称绑定到名为modcampaign.name的对象。

将此帖子发布到http服务的正确语法是什么？此外，如果我有另一个输入框描述，并且只想将其绑定到modcampaign.description ，如果用户在输入框中输入了数据，该怎么办？如果输入框是空的，我想从另一个对象（如modcampaign2.description）获取.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

AngularJS：仅发布非空白值

3 个答案: