我正在构建一份调查问卷,并试图弄清楚如何使用 ng-click 让我的“activeQuestion”仅显示每个问题的一个项目。
我可以使用 ng-repeat 获取要显示的所有项目。这是获取 json 并将其传递给 Controller 的最佳方法吗?正如我看到的很多示例一样,在 Controller 中获取 json。感谢任何帮助。
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();
// Goes to the next question
vm.next = function () {
return vm.activeQuestion +=1;
}
}]);
数据.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>
最佳答案
每次我得到一个项目列表,但只想一次显示其中一个项目时,我都会使用 2 个作用域变量并使用相等的指针。
Controller 示例:
angular.module('appName').controller('MyCtrl', function ($scope) {
// Initialize scope variables for list and current item.
$scope.questionList = [];
$scope.currentQuestion = null;
$scope.load = function () {
$scope.questionList = questionList; // Wherever this may come from.
$scope.currentQuestion = questionList[0]; // Setup the first element.
};
/**
* Registered on the ng-click binding for example.
*/
$scope.next = function () {
var index;
index = $scope.questionList.indexOf($scope.currentQuestion);
index += 1; // Forward to next element.
if ($scope.questionList[index]) {
$scope.currentQuestion = $scope.questionList[index];
}
else {
// Finished, advance to the next page or something.
}
}
$scope.load();
});
现在您可以使用当前问题元素来显示您的问题,并且该列表仅充当“隐藏背景数据”。
关于javascript - 使用 $http.get 显示 json 文件中的一个数组项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34398661/