如何使用Angularjs显示Json？

我正在学习AngularJS，并设置了项目的结构，但JSON无法在html中显示。如何使用Angularjs显示Json？

我是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" 
       } 
      ] 
     } 
    ]; 


}]);

来源

2017-04-20 user1727852

你可以做到这一点，

<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>

来源

2017-04-20 04:17:26 Sajeetharan

感谢您的回复，但它表现出充分的价值像目的。，我只想回答像“150年” 是我的JSON是错的？ – user1727852

@ user1727852检查更新的答案 – Sajeetharan

@ user1727852你为什么删除？ – Sajeetharan

如果你可以改变你这样的脚本，然后将很容易达到你想要什么：

$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>

来源

2017-04-20 04:26:37

@ user1727852：更新我的答案。 –

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>

来源

2017-04-20 04:45:26 RonyLoud

如何使用Angularjs显示Json？

回答

相关问题