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"
};

あなたは2回目の繰り返しを避けることができます

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

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

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

私のコードを確認してください： http://plnkr.co/edit/NGEcK7iieFRtvt7WP48A?p=preview

ng-repeatには配列が必要です。配列内のオブジェクトごとに、値でバインドされたキーが必要です。