从 Angular 中的 json 获取问题

Question

(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 中获取单个问题并在 html 中显示？

Answer 1

如果我理解正确的话，一个简单的 ng-repeat

<p ng-repeat="dataItem in data">{{dataItem}}</p>

下面的sn-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>

Answer 2

<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');
    }
}

})();