(function() {
'use strict';
angular
.module('app.interview', [])
.controller('InterviewController', InterviewController)
.factory('Interview', Interview);
InterviewController.$inject = ['$scope', 'Interview'];
Interview.$inject = ['$http'];
function Interview($http) {
var service = {};
service.fetchQuestion = fetchQuestion;
return service;
function fetchQuestion() {
return $http.get('/app/interview/questions.json');
}
}
})(); <div class="ad-container">
<h1 class="text-center headtext">Interview Questions</h1>
<form name="interviewForm">
<p></p>
</form>
</div>
这是我的json
{
"Q1": "What is a pointer on pointer?",
"Q2": "Write about yourself?",
"Q3": "write a program to find multiplication of two number?",
"Q4": "write a program to find addition of two number?",
"Q5": "write a program to find subtraction of two number?",
"Q6": "write a program to find percentage?",
"Q7": "write a program to find addition of two number?",
"Q8": "write a program to find addition of two number?"
}
如何从json中获取一个sigle问题并在html中显示？
答案 0 :(得分：1)
如果我理解正确，可以使用简单的ng-repeat
<p ng-repeat="dataItem in data">{{dataItem}}</p>
以下代码段将为您提供一些见解
(function() {
'use strict';
angular
.module('app.interview', [])
.controller('InterviewController', InterviewController)
.factory('Interview', Interview);
InterviewController.$inject = ['$scope', 'Interview'];
function InterviewController($scope, Interview) {
$scope.data = {}
$scope.showSubmit = false;
Interview.fetchQuestion().then(function(data) {
$scope.curentPage = 0;
console.log(data)
$scope.data = data;
$scope.updateCurrentPage = function() {
if (Object.keys($scope.data).length - 1 > $scope.curentPage) {
$scope.curentPage++;
} else {
$scope.showSubmit = true;
}
}
})
};
Interview.$inject = ['$http', '$q'];
function Interview($http, $q) {
var service = {};
service.fetchQuestion = fetchQuestion;
return service;
function fetchQuestion() {
//return $http.get('/app/interview/questions.json');
var data = {
"Q1": "What is a pointer on pointer?",
"Q2": "Write about yourself?",
"Q3": "write a program to find multiplication of two number?",
"Q4": "write a program to find addition of two number?",
"Q5": "write a program to find subtraction of two number?",
"Q6": "write a program to find percentage?",
"Q7": "write a program to find addition of two number?"
};
var deferred = $q.defer();
deferred.resolve(data);
return deferred.promise;
}
}
})();<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script>
<div ng-app="app.interview">
<div class="ad-container" ng-controller="InterviewController">
<h1 class="text-center headtext">Interview Questions</h1>
<form name="interviewForm">
<div ng-repeat="dataItem in data track by $index" ng-show="$index==curentPage">
<p>{{dataItem}}</p>
<input type="text" placeholder="Aswer">
</div>
<div ng-if="!showSubmit">
<button ng-click="updateCurrentPage()">Next</button>
</div>
<div ng-if="showSubmit">
<button>Submit</button>
</div>
</form>
</div>
</div>
答案 1 :(得分：0)
<div class="ad-container">
<h1 class="text-center headtext">Interview Questions</h1>
<form name="interviewForm" ng-if="!showSubmit">
<p ng-bind="question['Q'+ind]"></p>
<textarea cols="85" rows="10" placeholder="Write your answer here" ng-model="answer['Q'+ind]"></textarea>
</form>
<md-button style="float:right" class="md-raised md-primary flr8" ng-click="nextQuestion()" ng-if="!showSubmit">NEXT</md-button>
<!--<md-button style="float:right" class="md-raised md-primary flr8" ng-if="showSubmit">SUBMIT</md-button>-->
<md-card aria-label="Obmondo" class="login-card">
<form name="info" ng-if="showSubmit">
<md-card-header class="color2">
<md-card-header-text>
<span class="md-title">AKASH</span>
</md-card-header-text>
</md-card-header>
<md-card-content>
<md-input-container class="md-block">
<input name="name" ng-model="user.name" type="text" placeholder="Name" ng-required="true">
<div ng-messages="info.name.$error" role="alert">
<div ng-message="required">This is required</div>
</div>
<div ng-messages="login.email.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<input name="email" ng-model="user.email" type="email" placeholder="Email (required)" ng-required="true"
minlength="4" maxlength="100" ng-pattern="/^.+@.+\..+$/" />
<div ng-messages="info.email.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 4 and 100 characters long and look like an e-mail address.
</div>
</div>
<div ng-messages="info.email.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<input name="phome" ng-model="user.phone" type="tel" placeholder="Phone" ng-required="true">
<div ng-messages="info.name.$error" role="alert">
<div ng-message="required">This is required</div>
</div>
<div ng-messages="info.phone.$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<md-button class="md-raised login-btn text-center" type="submit">Submit</md-button>
</md-card-content>
</form>
</md-card>
(function () {
'use strict';
angular
.module('app.interview', [])
.controller('InterviewController', InterviewController)
.factory('Interview', Interview);
InterviewController.$inject = ['$scope', 'Interview'];
function InterviewController($scope, Interview) {
var originatorEv;
$scope.ind = 1;
$scope.question = {};
$scope.nextQuestion = function () {
if (Object.keys($scope.question).length-1 > $scope.ind){
$scope.ind++;
}else {
$scope.showSubmit = true;
}
};
Interview.fetchQuestion()
.then(function (response) {
console.log(response);
$scope.question = response.data;
})
.catch(function () {
$scope.question = {};
});
}
Interview.$inject = ['$http'];
function Interview($http) {
var service = {};
service.fetchQuestion = fetchQuestion;
return service;
function fetchQuestion() {
return $http.get('/app/interview/questions.json');
}
}
}）（）;