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

How to output elements in a JSON array with AngularJS

本文关键字：元素 数组 JSON 何使用 AngularJS 输出      更新时间：2023-09-26

作用域中定义的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>

但事实并非如此。

在类似的范围内更改json数组；

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

在你看来；

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

由于它在一个数组中，您将不得不循环遍历每个对象的键值。

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>

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

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

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

如果您使用符合ECMA5的浏览器，您可以尝试，

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

当然，只有当您的对象只有一个键时，这才能可靠地工作。如果它有多个密钥，最好编写一个过滤函数来获取密钥名称，然后可以使用该函数提取相关密钥。

检查我的代码：http://plnkr.co/edit/NGEcK7iieFRtvt7WP48A?p=preview

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

相关文章：