如何使用 Angularjs 显示 Json？答案

【问题标题】：How to show Json using Angularjs?如何使用 Angularjs 显示 Json？
【发布时间】：2017-09-16 12:41:44
【问题描述】：

我正在学习 AngularJS 并设置了项目的结构，但 JSON 无法在 html 中显示。

我是 Angularjs 的新手。如何使用 ng-repeat 指令将 JSON 显示到我的 html 中的数据。我的 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"
                }
            ]
        }
    ];


}]);

【问题讨论】：

标签： javascript jquery angularjs json angularjs-ng-repeat

【解决方案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>

演示

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>

【讨论】：

感谢您的回复，但它会像对象一样显示完整的值。我只想回答“150年”我的json错了吗？
@user1727852 为什么要删除？
对此感到抱歉。但我不明白。你说的话。（意思是：什么是删除）你的回答对我很有帮助。请解决我的另一个问题stackoverflow.com/questions/43511846/…

【解决方案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>

【讨论】：

@user1727852：更新了我的答案。

【解决方案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>

【讨论】：