Currently, I am working on a questionnaire project and facing an issue with displaying only one item for each question using ng-click.
Although I can display all items using ng-repeat, I am unsure if this is the most efficient way to fetch JSON data and pass it to a controller. I have noticed that many examples fetch JSON within the controller. Any suggestions would be appreciated.
service.module.js
angular.module('services', [])
.service('getQuestion', ['$http', '$q', function($http, $q){
var question = this;
question.questionList = {};
question.viewAll = function() {
var defer = $q.defer();
$http.get('/data/data.json')
.success(function(res){
question.questionList = res;
defer.resolve(res);
})
.error(function(err){
defer.reject(err);
})
return defer.promise;
}
return question;
}]);
controller.js
angular.module('app.question')
.controller('QuestionController', ['$scope', '$log','getQuestion',
function ($scope, $log, getQuestion) {
var vm = this;
vm.activeQuestion = 0;
vm.init = function() {
vm.getAll();
}
vm.getAll = function() {
getQuestion.viewAll()
.then(function(data){
// success
$log.log(data);
vm.questionList = getQuestion.questionList;
}, function (){
// error
})
}
vm.init();
// Proceeds to the next question
vm.next = function () {
return vm.activeQuestion +=1;
}
}]);
data.json
[
{
"sectionTitle": "",
"title": "Select each of the following that apply to you"
},
{
"sectionTitle": "Income",
"title": "Enter any income you get. Leave them blank if they don't apply to you."
},
{
"sectionTitle": "Savings",
"title": "If you regularly put money into a pension, savings or investments, enter the amount here."
}
]
html
<div class="main-content__right" ng-controller="QuestionController">
<div class="question" ng-repeat="element in question.questionList track by $index" ng-show="$index == activeQuestion">
<div class="cabtool">
<h2 style="margin-top: 0;">{{$index}} {{element.sectionTitle}}</h2>
<p>{{element.title}}</p>
</div>
</div>
<button type="button" class="btn btn-primary right-button-icon" style="float:none" ng-click="next()">Next</button>
</div>