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

Posted 2023-03-05

【中文标题】如何使用 AngularJS 输出 JSON 数组中的元素

【英文标题】：How to output elements in a JSON array with AngularJS

【发布时间】：2013-08-28 11:13:56

【问题描述】：

范围内定义的 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>

...但事实并非如此。

【参考方案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>

【讨论】：

完美，这行得通。我喜欢替代方案： question - 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>

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

【参考方案3】：

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


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

【讨论】：

当问题是一个动态值时，它会下降，它是在非平凡的示例案例中。

【参考方案4】：

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

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

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

【讨论】：

在工作时，我发现它远非简洁易读。正如您自己也注意到的那样 - 向您的对象添加不相关的键会破坏这个 ngRepeat，这意味着它不是一个好的设计。

【参考方案5】：

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

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