我已经将角度模态作为指令。我的目标是使用给定的表单数据向json文件发出post请求。我不知道如何设置发布请求。我读到$ http为我处理JSON.stringify()所以我不需要为帖子配置数据。我也想知道我是否需要设置标题?以下是我的大部分数据。
我创建了一个json文件来保存一个我从中获得啤酒列表的数组。
addBeer()函数是理想情况下在工厂中发出post请求的地方
现在我正在设置我的功能
function addBeer() {
return $http.post(url,{
data: JSON.stringify({}),
headers: {'Content-Type': 'application/json'}
})
.then(function(response) {
console.log('response', response);
})
}
这将是工厂的一部分。在整个工厂,我遵循约翰爸爸风格指南。 getBeerList()获取整个json文件,而 getBeer()获取我正在寻找的每一种啤酒。
(function() {
'use strict';
angular
.module('beerApp.services.beerList',[])
.factory('beerListFactory', beerListFactory);
beerListFactory.$inject = ['$http', '$log'];
function beerListFactory($http, $log) {
var url = './app/Services/IBU_list.json';
return {
getBeerList: getBeerList,
getBeer: getBeer,
addBeer: addBeer
}
function getBeerList(){
return $http.get(url, {catch: true})
.then(getBeerListComplete)
.catch(getBeerListFailed);
function getBeerListComplete(response) {
return response.data;
}
function getBeerListFailed(error) {
console.log('error', error);
}
}
function getBeer(id) {
return $http.get(url, {
catch: true
})
.then(getBeerComplete)
function getBeerComplete(response) {
console.log('promise', id);
console.log('response', response.data.length);
var data = response.data;
for(var i =0, len=data.length;i<len;i++) {
console.log(typeof data[i].id)
if(data[i].id == parseInt(id)) {
console.log('data i',data[i]);
return data[i];
}
}
} // end of getBeerComplete
} //end of getBeer
function addBeer() {
return $http.post(url,{
data: JSON.stringify({}),
headers: {'Content-Type': 'application/json'}
})
.then(function(response) {
console.log('response', response);
})
}
} // end of beer Factory
})();
总体目标是推入具有如此设置对象的json数组:
{
"id" : "4",
"BeerStyle": "American Light Lager",
"IBU": "8-17",
"list" : {"drinks": []}
},
表格中的每种饮料都应该进入“饮料”阵列
我的模态实例控件内部我正在检查我用
设置的表单值vm.newBeer = {};
这是我注释掉addBeer函数的函数,但这是我理想情况下对post请求的作用
function ModalInstanceCtrl( $scope,$modalInstance) {
var vm = this;
vm.ok = ok;
vm.cancel = cancel;
vm.newBeer = {};
// vm.addBeer = function() {
// }
function ok () {
console.log('new beer', vm.newBeer);
// console.log('IBU',$scope.IBU);
console.log('clicked');
$modalInstance.close();
};
function cancel() {
console.log('beer', vm.newBeer);
console.log('clicked');
$modalInstance.dismiss('cancel');
};
}
我正确地获取控制台内的值
<input type="text" class="form-control" placeholder="beer" ng-model="vm.newBeer.beerName">
在我的指令I指令中,我正在调用我为一杯啤酒做的获取请求。我这样做是为了确保我已经设置好并且可以连接到控制器。我认为发布请求将在决议中发生。
function ModalController($modal, $log , $scope, beerListFactory, $stateParams) {
var vm = this;
vm.animationsEnabled = true;
vm.open = open;
function open() {
var modalInstance = $modal.open({
animation: vm.animationsEnabled,
templateUrl: 'app/components/modal/modal.html',
controller: ModalInstanceCtrl,
controllerAs: 'vm',
bindToController: true,
size: 'lg'
// resolve: {
// title: function() {
// return 'training Info';
// }
// }
});
modalInstance.result.then(function(selectedItem) {
$log.info('beer in modal',beerListFactory.getBeer($stateParams.beerId) );
console.log("Confirmed: "+ selectedItem);
$scope.selectedItem = selectedItem;
}, function() {
$log.info('modal dismissed at: ' + new Date());
});
};
答案 0 :(得分:0)
如果您使用的是JSON,我建议您使用Angular的$resource工厂。
返回的资源对象具有提供的操作方法 高级行为,无需与低级别交互 $ http服务。
您可以使用$http.get()
和$http.post()
,而不是Beer.query()
和Beer.save()
。 $resource
专为像您这样的服务而设计。
答案 1 :(得分:0)
我终于成功了。
<强> HTML 强>
<!--MODAL WINDOW for item details -->
<script type="text/ng-template" id="itemModalContent.html">
<div class="modal-dialog " ng-class="{fadeOut: startFade}" ng-hide="hidden">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="cancel right button" data-dismiss="modal" aria-hidden="true" ng-click="cancel()"><i class="fa fa-close"></i></button>
<span class="item-name">{{item.name}}</span>
</div>
<div class="modal-body">
<p class="description">{{item.description}}</p>
<input type="hidden" ng-model="item.uniqueid" id="itemid" value="{{item.courseid}}" name="itemid"/>
<p class="response"> {{PostDataResponse}}</p>
<p class="error"> {{ResponseDetails}}</p>
</div>
<div class="modal-footer">
<button type="button" class="button cancel btn-default" data-dismiss="modal" ng-click="cancel()">Cancel</button>
<button type="button" class="button ok btn-primary" ng-click="confirm()">Sign me up</button>
</div>
</div>
</div>
</script>
<强>角强>
myApp.controller('itemModalInstanceCtrl', function ($http, $scope, $uibModalInstance, $timeout, item) {
$scope.item = item;
$scope.cancel = function () {
$uibModalInstance.dismiss();
$('.overlay').hide();
};
updateUrl = '<your URL to post to>';
$scope.confirm = function () {
var myItemId = $scope.item.uniqueid;
// use $.param jQuery function to serialize data from JSON
var data = $.param({
uniqueid: myItemId
});
var config = {
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
}
$http.post(updateUrl, data, config)
.success(function (data, status, headers, config) {
alert(JSON.stringify(data));
$scope.PostDataResponse = "You have signed up!";
})
.error(function (data, status, header, config) {
$('.response').addClass('error');
$scope.ResponseDetails = "data: " + data +
"<br />status: " + status +
"<br />headers: " + header +
"<br />config: " + config;
});
$timeout(function() {
$uibModalInstance.close({});
$('.overlay').hide();
}, 3000);
};
});
秘诀不是将$scope
或$http
注入传递给确认功能,而是在功能内引用$scope.item.property
完整。希望这有助于某人!