2013-08-26 34 views
7
JSON

JSON mảng được định nghĩa trong phạm vi:Làm thế nào để các yếu tố đầu ra trong một mảng với AngularJS

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

HTML:

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

Output:

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

Những gì tôi muốn đầu ra nhìn như:

Question 1 - Answer1 
Question 2 - Answer2 

Làm thế nào nó có vẻ như nó sẽ làm việc:

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

... nhưng nó không.

Trả lời

12

Thay đổi mảng json của bạn trong phạm vi như;

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

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

Và theo quan điểm của bạn;

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

Tuyệt vời, tính năng này hoạt động. Tôi thích giải pháp thay thế:

{{question}} - {{answer}}
, không yêu cầu thêm khóa/giá trị, nhưng tôi nghĩ điều này có thể mở rộng hơn và gần hơn với việc trả lời câu hỏi. –

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


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

Điều này rơi xuống khi câu hỏi là một giá trị động, mà nó là trong trường hợp ví dụ không tầm thường. –

8

Do nó là trong một mảng, bạn sẽ phải lặp qua các giá trị quan trọng của từng đối tượng.

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

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

Cách khác:
Nếu bạn có chỉ là một đối tượng đơn giản:

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

Bạn có thể tránh lặp lại thứ hai

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

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

0

Nếu bạn đang sử dụng trình duyệt ECMA5 tuân thủ, bạn có thể thử,

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

Tất nhiên, điều này sẽ chỉ làm việc đáng tin cậy nếu đối tượng của bạn chỉ có 1 chìa khóa. Nếu nó có nhiều hơn một khóa, đặt cược tốt nhất của bạn sẽ là viết một hàm lọc lấy các tên khóa mà bạn có thể sử dụng để trích xuất các khóa liên quan.

+0

Trong khi làm việc, tôi thấy nó không được ngắn gọn và dễ đọc. Như bạn cũng đã nhận thấy chính mình - thêm các phím không liên quan đến đối tượng của bạn sẽ phá vỡ ngRepeat này, có nghĩa là nó không phải là một thiết kế tốt. – Majki