1
我已經將角度模式作爲指令。我的目標是使用給定的表單數據發送一個json文件的post請求。我不知道如何設置發佈請求。我讀過$ http爲我處理JSON.stringify（），所以我不需要爲該帖子配置數據。我也想知道是否需要設置我的標題？以下是我的大部分數據。使用角度UI模式發出帖子請求
我做了一個json文件來容納一個數組，我從中得到一個啤酒列表。
的addBeer（）函數是我理想的情況使工廠
發佈請求因爲它的立場，現在我建立我的功能，像這樣
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功能的功能，但是這是我的理想與崗位要求
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());
});
};
更改addBeer到：功能addBeer（）{ \t回$ http.post（URL，{ \t \t數據：JSON.stringify（{}）， \t \t頭：{ '內容類型'：「應用程序/ JSON '} \t}） \t。然後（功能（響應）{ \t \t的console.log（' Sucess： '響應）; \t}，函數（誤差）{ \t \t的console.log（'錯誤：'，響應）; \t }）; }，這個顯示錯誤發生在後 –
@EmirMarques我希望得到一個不允許的方法。這是我得到的。我不確定如何設置。我需要將newBeer對象放入分配給飲料的數組中。 – Winnemucca