如何使用AngularJS输出JSON数组中的元素

Question

范围中定义的JSON数组:

$scope.faq = [
        {"Question 1": "Answer1"},
        {"Question 2": "Answer2"}
    ];

HTML:

<div ng-repeat="f in faq">
    {{f}}
</div>

输出:

{"Question 1": "Answer1"}
{"Question 2": "Answer2"}

我希望输出看起来像:

Question 1 - Answer1
Question 2 - Answer2

看起来它应该如何工作:

<div ng-repeat="f in faq">
    {{f.key}}-{{f.value}}
</div>

......但事实并非如此.

Answer 1

在范围内更改您的json数组;

$scope.faq = [
        {key: "Question 1",
         value: "Answer1"},

        {key: "Question 2",
         value: "Answer2"}
    ];

在你看来;

<div ng-repeat="f in faq">
    {{f.key}}-{{f.value}}
</div>

Answer 2

由于它位于数组中,因此您必须遍历每个对象的键值.

<div ng-repeat="value in faq">
    <div ng-repeat="(question,answer) in value">
        {{question}} - {{answer}}
    </div>
</div>

或者:
如果你只有一个简单的对象:

$scope.faq = {
     "Question 1": "Answer1",
     "Question 2": "Answer2"
};

你可以避免第二次重复

<div data-ng-repeat="(question,answer) in faq">
        {{question}} - {{answer}}
</div>