我在网址http://polls.apiblueprint.org/questions上有一个API,我必须使用它在angularjs中创建一个CRUD(创建读取更新删除)应用程序。网址应根据正在执行的操作而改变。我只是申请通过GET方法从API中检索所有问题。其他方法,即POST,PUT和DELETE不起作用。我尝试了一切都没有成功。我甚至尝试通过类似的例子来解决它而没有成功。愿有人帮助我走出这个洞。希尔是我的代码。
显示所有问题的主要HTML:
> <h2>List of all questions</h2>
<input type="button" class="btn btn-info" value="Create a question" style="float: right" ng-click="newQuestion()">
<table class="table table-striped" width="100%">
<tr style="font-weight: bold">
<td>Questions</td>
<td>Options</td>
</tr>
<tr ng-repeat="questions in questionslist">
<td style="margin-top: 2%; margin-bottom: 2%"><a href="#/questions/:question_id">{{questions.question}}</a></td>
<td><input type="button" value="View" ng-click="view(questions.question_id)" class="btn btn-primary">
<!--<input type="button" value="Delete" ng-click="erase(questionslist)" class="btn btn-danger">-->
<input type="button" value="Löschen" ng-click="erase(questions.question_id)" class="btn btn-danger">
</td>
</tr>
</table>
<div>
</div>
调用所有问题的服务
'use strict';
var app = angular.module('formentationApp');
app.factory('questionsservices', function($resource){
return $resource ('http://polls.apiblueprint.org/questions', {},{
query:{
method:'GET',
isArray:true
},
save:{
method:'POST'
}
});
});
定义所有问题调用的控制器
'use strict';
var app = angular.module('formentationApp');
app.controller('questionController', function($scope, questionsservices, $location, questionseditservice, $routeParams){
// Calling the list of questions
$scope.questionslist = questionsservices.query();
console.log('Calling all questions with success');
});
直到现在一切正常。现在这些方法不起作用。
帖子方法控制器
'use strict';
var app = angular.module('formentationApp');
app.controller('newController', function($scope, questionsservices, $location, questionseditservice, $routeParams){
//Defining the post method, to add a new question
$scope.add = function(){
questionsservices.save($scope.question);
$location.path('/questions');
questionsservices.query();
};
//Cancelling a process of addition
$scope.abbrechen = function(){
$location.path('/questions');
};
});
POST方法HTML
<h2>Frage erstellen</h2>
<div style="margin-top: 4%">
<table>
<tr style="margin-top: 2%">
<td><label for="question">Frage : </label> <input ng-model="questions.question" id ="question" type="text" style="height: 30px; width:400px"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table>
<tr>
<td><label for="1a">Wahl 1 :</label> <input ng-model="questions.choices.choice1" id="1a" type="text"></td>
<td><label for="1b"> Stimme 1 :</label> <input ng-model="questions.choices.vote1" id="1b" type="text"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label for="2a">Wahl 2 : </label> <input ng-model="questions.choices.choice2" id="2a" type="text"></td>
<td><label for="2b"> Stimme 2 :</label> <input ng-model="questions.choices.vote2" id="2b" type="text"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label for="3a">Wahl 3 :</label> <input ng-model="questions.choices.choice3" id="3a" type="text"></td>
<td><label for="3b"> Stimme 3 :</label> <input ng-model="questions.choices.vote3" id ="3b" type="text"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label for="4a">Wahl 4 : </label> <input ng-model="questions.choices.choice4" id="4a" type="text"></td>
<td><label for="4b"> Stimme 4 : </label> <input ng-model="questions.choices.vote4" id="4b" type="text"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label for="5a">Wahl 5 : </label> <input ng-model="questions.choices.choice5" id="5a" type="text"></td>
<td><label for="5b"> Stimme 5 : </label> <input ng-model="questions.choices.vote5" id="5b" type="text"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><label for="6a">Wahl 6 : </label> <input ng-model="questions.choices.choice6" id="6a" type="text"></td>
<td><label for="6b"> Stimme 6 : </label> <input ng-model="questions.choices.vote6" id="6b" type="text"></td>
</tr>
</table>
</td>
</tr>
</table>
<div style="margin-top: 4%">
<input type="button" class="btn btn-info" ng-click="add()" value="Add Question">
<input type="button" class="btn btn-default" ng-click="abbrechen()" value="Cancel">
</div>
</div>
DELETE和UPDATE方法服务
'use strict';
var app = angular.module('formentationApp');
app.factory('questionseditservice', function($resource){
//return $resource('http://polls.apiblueprint.org/questions/id',{},
return $resource('http://polls.apiblueprint.org/questions/:question_id',{},
{
show : { method: 'GET'},
update: { method: 'PUT', params: {question_id: '@question_id'} },
remove: { method: 'DELETE', params: {question_id: '@question_id'}}
})
});
删除方法控制器
'use strict';
var app = angular.module('formentationApp');
app.controller('questionController', function($scope, questionsservices, $location, questionseditservice, $routeParams){
$scope.erase = function(questionid){
questionseditservice.delete({question_id:questionid});
questionsservices.query();
});
UPDATE方法控制器
'use strict';
var app = angular.module('formentationApp');
app.controller('questionController', function($scope, questionsservices, $scope.view = function(questionid){
console.log('Viewing a question`s details');
$location.path('/questions/' + questionid);
var variable = $scope.questions;
}; questionsservices.query();
$scope.newQuestion = function(){
$location.path('/questions-creation');
};
});
很抱歉,代码可能不清楚,但我真的需要帮助。我是angularjs的新手。提前致谢