Javascript 如何使用Angularjs显示Json？

我正在学习AngularJS并设置了项目的结构，但是JSON我不能在html中显示

我是新来安格拉斯的。如何使用ng repeat指令在我的html中向数据显示JSON。我的HTML是：

有人建议我如何使用json吗

---

你可以这样做

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

{{qd.问题}


{{value[“answer”+（$index+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>

{{qd.问题}


{{value[“answer”+（$index+1）]}

如果您可以像这样更改脚本，那么就很容易实现您想要的：

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

{{posability.option}

工作演示：

编辑

如果您不想更改脚本，请使用以下命令：

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

{{qd.probabilities[0].答案1}
{{qd.可能性[1].答案2}
{{qd.可能性[2].答案3}
{{qd.可能性[3].答案4}

如果您可以像这样更改脚本，那么就很容易实现您想要的：

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

{{posability.option}

工作演示：

编辑

如果您不想更改脚本，请使用以下命令：

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

{{qd.probabilities[0].答案1}
{{qd.可能性[1].答案2}
{{qd.可能性[2].答案3}
{{qd.可能性[3].答案4}

var-app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.quick=[{
问题：“1绿海龟的典型寿命是多少？”，
id:1，
可能性：[{
回答1：“150年”
},
{
回答2：“10年”
},
{
回答3：“80年”
},
{
回答4：“40年”
}
]
},
{
问题：“2绿海龟的典型寿命是多少？”，
id:2，
可能性：[{
回答1：“250年”
},
{
回答2：“20年”
},
{
回答3：“160年”
},
{
回答4：“20年”
}
]
}];
}]);

{{qd.问题}


{{value}


var-app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.quick=[{
问题：“1绿海龟的典型寿命是多少？”，
id:1，
可能性：[{
回答1：“150年”
},
{
回答2：“10年”
},
{
回答3：“80年”
},
{
回答4：“40年”
}
]
},
{
问题：“2绿海龟的典型寿命是多少？”，
id:2，
可能性：[{
回答1：“250年”
},
{
回答2：“20年”
},
{
回答3：“160年”
},
{
回答4：“20年”
}
]
}];
}]);

{{qd.问题}


{{value}

感谢您的回复，但它会像对象一样显示完整的值。我想要的唯一答案是“150年”是我的json错了吗？@user1727852为什么要删除？很抱歉。但我不明白。你说什么。你的回答对我很有帮助。plz解决了我的1个问题，谢谢你的回复，但它显示了一个像对象一样的完整值。我想要的唯一答案是“150年”是我的json错了吗？@user1727852为什么要删除？很抱歉。但我不明白。你说什么。你的回答对我很有帮助。请再解决我的1个问题@user1727852:更新了我的答案@user1727852:更新了我的答案。