如何使用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

由于它位于数组中，因此您将不得不遍历每个对象的键值。

http://fiddle.jshell.net/TheSharpieOne/QuCCk/

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

Answer 3

$scope.faq = [
    "Answer1",
    "Answer2"
];


<div ng-repeat="answer in faq">
    Question {{$index+1}}-{{answer}}
</div>

Answer 4

如果您使用的是ECMA5兼容浏览器，则可以尝试，

<div ng-repeat="f in faq">
    {{Object.keys(f)[0]}}-{{f[Object.keys(f)[0]]}}
</div>

当然，只有在您的对象只有1个键的情况下，这才能可靠地起作用。 如果它有多个键，那么最好的选择是编写一个获取键名称的过滤器函数，然后可以使用该函数提取相关的键。

Answer 5

ng-repeat需要一个数组，对于数组中的每个对象，您都需要键与值绑定。