如何使用Angularjs顯示Json？

Question

我正在學習AngularJS，並設置了項目的結構，但JSON無法在html中顯示。

我是Angularjs的新人。如何使用ng-repeat指令在我的html中顯示JSON數據。我的HTML是：

有人建議我如何使用json。？

---

<div ng-repeat="qd in quiz"> 
     <p>{{qd.question}} </p> 
     <p>{{qd.id}} </p> 
     <ul> 
      <li>{{qd.possibilities[0]}} </li> 
      <li>{{qd.possibilities[1]}} </li> 
      <li>{{qd.possibilities[2]}} </li> 
      <li>{{qd.possibilities[3]}} </li> 
     </ul> 
     </div> 

腳本：

myApp.controller('appCtrl', ['$scope', '$http', function($scope, $http) { 
    $scope.quiz = [{ 
      question: "1 what is the typical lifespan of a green sea turtle ?", 
      id: 1, 
      possibilities: [{ 
        answer1: "150 years" 
       }, 
       { 
        answer2: "10 years" 
       }, 
       { 
        answer3: "80 years" 
       }, 
       { 
        answer4: "40 years" 
       } 
      ] 
     }, 
     { 
      question: "2 what is the typical lifespan of a green sea turtle ?", 
      id: 2, 
      possibilities: [{ 
        answer1: "250 years" 
       }, 
       { 
        answer2: "20 years" 
       }, 
       { 
        answer3: "160 years" 
       }, 
       { 
        answer4: "20 years" 
       } 
      ] 
     } 
    ]; 


}]); 

Answer 1

你可以做到這一點，

<div ng-repeat="qd in quiz"> 
      <p>{{qd.question}} </p> 
      <ul ng-repeat="(key,value) in qd.possibilities"> 

       <li>{{value["answer"+($index+1)]}} </li> 
      </ul> 
    </div> 

DEMO

var myApp = angular.module('myApp',[]); 
 
myApp.controller('appCtrl', ['$scope', function($scope) { 
 
$scope.quiz = [{ 
 
     question: "1 what is the typical lifespan of a green sea turtle ?", 
 
     id: 1, 
 
     possibilities: [{ 
 
       answer1: "150 years" 
 
      }, 
 
      { 
 
       answer2: "10 years" 
 
      }, 
 
      { 
 
       answer3: "80 years" 
 
      }, 
 
      { 
 
       answer4: "40 years" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     question: "2 what is the typical lifespan of a green sea turtle ?", 
 
     id: 2, 
 
     possibilities: [{ 
 
       answer1: "250 years" 
 
      }, 
 
      { 
 
       answer2: "20 years" 
 
      }, 
 
      { 
 
       answer3: "160 years" 
 
      }, 
 
      { 
 
       answer4: "20 years" 
 
      } 
 
     ] 
 
    } 
 
]; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app='myApp' ng-controller='appCtrl'> 
 
    <div class="row"> 
 
     <div ng-repeat="qd in quiz"> 
 
      <p>{{qd.question}} </p> 
 
      <ul ng-repeat="(key,value) in qd.possibilities"> 
 
      
 
       <li>{{value["answer"+($index+1)]}} </li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

如果你可以改變你這樣的腳本，然後將很容易達到你想要什麼：

$scope.quiz = [{ 
    question: "1 what is the typical lifespan of a green sea turtle ?", 
    id: 1, 
    possibilities: [{ 
     option: "150 years" 
    }, { 
     option: "10 years" 
    }, { 
     option: "80 years" 
    }, { 
     option: "40 years" 
    }] 
    }, { 
    question: "2 what is the typical lifespan of a green sea turtle ?", 
    id: 2, 
    possibilities: [{ 
     option: "250 years" 
    }, { 
     option: "20 years" 
    }, { 
     option: "160 years" 
    }, { 
     option: "20 years" 
    }] 
    }]; 

HTML

<ul> 
<li ng-repeat="possibilty in qd.possibilities">{{possibilty.option}}</li> 
</ul> 

工作演示：Plnkr

編輯

如果你不想改變你的腳本，使用：

<ul> 
    <li>{{qd.possibilities[0].answer1}} </li> 
    <li>{{qd.possibilities[1].answer2}} </li> 
    <li>{{qd.possibilities[2].answer3}} </li> 
    <li>{{qd.possibilities[3].answer4}} </li> 
</ul> 

Answer 3

var app = angular.module('plunker', []); 
 
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) { 
 
$scope.quiz = [{ 
 
     question: "1 what is the typical lifespan of a green sea turtle ?", 
 
     id: 1, 
 
     possibilities: [{ 
 
       answer1: "150 years" 
 
      }, 
 
      { 
 
       answer2: "10 years" 
 
      }, 
 
      { 
 
       answer3: "80 years" 
 
      }, 
 
      { 
 
       answer4: "40 years" 
 
      } 
 
     ] 
 
    }, 
 
    { 
 
     question: "2 what is the typical lifespan of a green sea turtle ?", 
 
     id: 2, 
 
     possibilities: [{ 
 
       answer1: "250 years" 
 
      }, 
 
      { 
 
       answer2: "20 years" 
 
      }, 
 
      { 
 
       answer3: "160 years" 
 
      }, 
 
      { 
 
       answer4: "20 years" 
 
      } 
 
     ] 
 
    }]; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app="plunker" ng-controller="MainCtrl"> 
 
<div ng-repeat="qd in quiz"> 
 
    <p>{{qd.question}} </p> 
 
    <ul ng-repeat="item in qd.possibilities"> 
 
     <li ng-repeat="(key,value) in item">{{value}}</li> 
 
    </ul> 
 
    </div> 
 
    
 
    </div>