2013-08-26 11 views
7

JSON tablicy zdefiniowane w zakresie:Jak elementów wyjściowych w tablicy JSON z angularjs

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

HTML:

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

wyjściowa:

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

Chcę wyjście wyglądać podobne:

Question 1 - Answer1 
Question 2 - Answer2 

Jak wydaje się, że to powinno działać:

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

... ale tak nie jest.

Odpowiedz

12

Zmień tablicę json w zakresie takim jak;

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

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

I według ciebie;

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

Doskonały, to działa. Podoba mi się alternatywa:

{{question}} - {{answer}}
, która nie wymaga dodawania klucza/wartości, ale myślę, że jest to bardziej rozszerzalne i bliższe odpowiedzi na pytanie. –

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


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

To spada, gdy pytanie jest wartością dynamiczną, która jest w nietrywialnym, przykładowym przypadku. –

8

spowodowane to jest w tablicy, trzeba będzie pętli kluczowych wartości każdego obiektu.

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

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

Alternatywnie:
Jeśli masz tylko prosty obiekt:

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

Można uniknąć drugiej powtórki

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

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

0

Jeśli używasz przeglądarek zgodnych ECMA5, można spróbować,

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

Oczywiście, będzie to działać tylko wiarygodnie, jeśli obiekt ma tylko 1 klucz. Jeśli ma więcej niż jeden klucz, najlepiej będzie napisać funkcję filtrującą, która otrzyma nazwy kluczy, które następnie można wykorzystać do wyodrębnienia odpowiednich kluczy.

+0

Podczas pracy uważam, że nie jest on zwięzły i czytelny. Jak również zauważyłeś sam siebie - dodanie niepowiązanych kluczy do twojego obiektu spowodowałoby przerwę w ngRepeat, co oznacza, że ​​nie jest to dobry projekt. – Majki