Question

我有一个像这样的Json页面：

    [{
       "qid": "1",
       "contester": "0",
       "answer": "0",
       "question": "What are you most likely to do after getting into an argument?",
       "images": [{
               "qid": "1",
               "imageid": "AB100",
               "imgname": "doghug_q1",
               "imgpath": "Images\/Q1\/doghug_q1.jpg"
            }, 
            {
               "qid": "1",
               "imageid": "AB101",
               "imgname": "eq_q1.jpg",
               "imgpath": "Images\/Q1\/eat_q1.jpg"
            }, {
               "qid": "1",
               "imageid": "AB102",
               "imgname": "headache_q1",
               "imgpath": "Images\/Q1\/headache_q1.jpg"
            }, {
              "qid": "1",
              "imageid": "AB106",
              "imgname": "scream_q1.jpg",
              "imgpath": "Images\/Q1\/scream_q1.jpg"
            }, {
              "qid": "1",
              "imageid": "AB107",
              "imgname": "shopping_q1",
              "imgpath": "Images\/Q1\/shopping_q1.jpg"
            }, {
              "qid": "1",
              "imageid": "AB108",
              "imgname": "walkAlone_q1",
              "imgpath": "Images\/Q1\/walkAlone_q1.jpg"
            }]
     }, {
          "qid": "2",
          "contester": "0",
          "answer": "0",
          "question": "Which game would you rather play?",
          "images": [{
                   "qid": "2",
                   "imageid": "AB105",
                   "imgname": "charades_q2.jpg",
                   "imgpath": "Images\/Q2\/charades_q2.jpg"
              }, {
                   "qid": "2",
                   "imageid": "AB109",
                   "imgname": "playingCards_q2.jpg",
                   "imgpath": "Images\/Q2\/playingCards_q2.jpg"
              }, {
                   "qid": "2",
                   "imageid": "AB110",
                   "imgname": "chess_q2",
                   "imgpath": "Images\/Q2\/chess_q2.jpg"
              }, {
                   "qid": "2",
                   "imageid": "AB111",
                   "imgname": "twister_q2",
                   "imgpath": "Images\/Q2\/twister_q2.jpg"
             }]
   }]

我的控制器代码如下：

    var app = angular.module('myApp', []);
    app.controller('ListCtrl', ['$scope', '$http', function($scope, $http) {
        $http.get('results.json').success(function(data) {

            $scope.questions = []; 

            angular.forEach(data, function(question) {
                  $scope.questions.push(question)

             });

           $scope.images=[];// get data from json
           angular.forEach($scope.questions, function(sorg) {
                   angular.forEach(sorg.images, function(image) {
                        $scope.images.push(image)

                    });
           });

          console.log($scope.images);
       });
   }]);

为了显示相关问题及其答案图像，html如下：

    <body ng-app="myApp" >
        <div ng-controller="ListCtrl">
              <ul>

                  <li ng-repeat="question in questions"> {{question.qid}}. {{question.question}} </li>
                  <li ng-repeat="image in images"> {{image.imgpath}}  </li>

             </ul>
        </div>

然而输出显示：

参与辩论后你最有可能做什么？
你喜欢哪种游戏？

图片/ Q1 / doghug_q1.jpg 图片/ Q1 / eat_q1.jpg 图片/ Q1 / headache_q1.jpg 图片/ Q1 / scream_q1.jpg 图片/ Q1 / shopping_q1.jpg 图片/ Q1 / walkAlone_q1.jpg 图片/ Q2 / charades_q2.jpg 图片/ Q2 / playingCards_q2.jpg 图片/ Q2 / chess_q2.jpg 图像/ Q2 / twister_q2.jpg

但我希望输出如下：

参加辩论后你最有可能做什么？

图片/ Q1 / doghug_q1.jpg 图片/ Q1 / eat_q1.jpg 图片/ Q1 / headache_q1.jpg 图片/ Q1 / scream_q1.jpg 图片/ Q1 / shopping_q1.jpg 图像/ Q1 / walkAlone_q1.jpg
你喜欢哪种游戏？

图片/ Q2 / charades_q2.jpg 图片/ Q2 / playingCards_q2.jpg 图片/ Q2 / chess_q2.jpg 图像/ Q2 / twister_q2.jpg

所以基本上我希望问题二的图像显示在问题2下面，问题1的图像显示在问题一下面。然而，代码似乎没有按照我想要的方式工作，因为它首先显示所有问题，然后最终显示所有图像答案。他们有什么方法可以解决这个问题？我是以错误的方式使用ng-repeat吗？请帮忙..

Answer 1

你不需要这个数组图像，因为图像在问题中，你可以这样做：

angular.forEach(data, function(question) {
      $scope.questions.push(question);
});

HTML：

 <ul>
    <li ng-repeat="question in questions"> {{question.qid}}. {{question.question}} 
        <div ng-repeat="image in question.images"> {{image.imgpath}}  </div>
    </li>
 </ul>

删除此块：

$scope.images=[];// get data from json
angular.forEach($scope.questions, function(sorg) {
     angular.forEach(sorg.images, function(image) {
          $scope.images.push(image)
     });
 });

Plunker

Answer 2

<强> JS

var app = angular.module('myApp', []);
app.controller('ListCtrl', ['$scope', '$http', function($scope, $http) {
    $scope.questions = []
    $http.get('results.json').success(function(data) {
        $scope.questions = data;
   });
}]);

<强> HTML

<div ng-controller="ListCtrl">
          <ul>
              <li ng-repeat="question in questions"> {{question.qid}}. {{question.question}}>
                   <p ng-repeat="image in question.images"> {{image.imgpath}}  </p>
              </li>
         </ul>
    </div>

Answer 3

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">


<div ng-repeat="x in records">
  <b>{{x.question}}</b><br><br>

  <div ng-repeat="y in x.images">{{y.imgpath}}<br><br></div>
</div>


<script>
var app = angular.module("myApp", []);
app.controller("myCtrl",['$scope','$http', function($scope,$http) {

    $http.get("result.json")
  .then(function(response) {
      $scope.records = response.data;
  }, function(response) {
      $scope.records = "Something went wrong";
  });

}]);
</script>

</body>
</html>

以角度访问嵌套的json并在php中显示

3 个答案: