如何使用AngularJS呈現動態定義列表？

我將如何使用AngularJS呈現動態定義列表？如何使用AngularJS呈現動態定義列表？

實施例：

數據：

[ 
    { 
     key: 'a', 
     value: 'x' 
    }, { 
     key: 'b', 
     value: 'y' 
    } 
]

希望的HTML：

<dl> 
    <dt>a</dt> 
    <dd>x</dd> 
    <dt>b</dt> 
    <dd>y</dd> 
</dl>

<dl> 
    <dt>Availability</dt> 
    <dd ng-repeat="availability in phone.availability">{{availability}}</dd> 
</dl>

作品DDS和一個的動態數靜態nu很多dts，但不是兩者的動態數字。

2012-05-05 Max Nanasy

在Angular 1.2中添加了允許ng-repeat-start/ng-repeat-end的新功能。

有了這個功能，你可以寫你的HTML這樣的：

<dl> 
    <dt ng-repeat-start="i in items">{{i.key}}</dt> 
    <dd ng-repeat-end>{{i.value}}</dd> 
</dl>

一個完整的工作示例見this plnkr。

2013-05-29 08:06:43

您是否嘗試過使用此功能？我得到了錯誤：'TypeError：Object＃ has has method'hasAttribute'' –

@gevgeny似乎有一個錯誤，在ng-repeat-start和ng-repeat-end之間不能有任何文本（包括空格）。這個運動員工作：http://plnkr.co/edit/9BhyYhQlQMRZtZKIsZ8G –

看起來你是對的。謝謝。 –

這是一個問題，因爲你需要用一些元素來包裝它才能重複。而這不會是一個有效的HTML - 你會得到與無序列表或表格同樣的麻煩......

<dl> 
    <div ng-repeat="i in items"> 
    <dt>{{i.key}}</dt> 
    <dd>{{i.value}}</dd> 
    </div> 
</dl>

我猜裏面dl的div不規範允許的，但它的作品 - 至少在Chrome：-D

我們計劃在評論中支持ng-repeat以支持此操作。

2012-05-05 01:49:51 Vojta

我接受你的答案不是因爲你的解決方法實際上是有效的（例如http://jsfiddle.net/JyWdT，至少在Chrome中並不完全起作用（所有元素都應該着色）），但是因爲你是一個角色開發人員，他說這是不可能的，因此我會認爲這是不可能的。 –

稍微有點像演示：http://jsfiddle.net/MaxNanasy/nEDyk –

問題是，HTML不允許你包裝這些元素 - 沒有允許的元素。這就是爲什麼我們的編譯器已經在註釋中支持指令的原因，所以我們可以允許ng-repeat在將來的評論中定義... – Vojta

我創建了一個叫做repeatInside的指令來解決像這樣的問題。

<dl repeat-inside="word in dictionary"> 
    <dt>{{word.name}}</dt> 
    <dd>{{word.definition}}</dd> 
</dl>

2013-07-20 21:42:02 bigblind

好又簡單，我比推薦的官方「開始」/「結束」指令更喜歡這個。 – EventHorizon

角度很好的作品<1.2 – MANCHUCK

我還沒有爲此工作過很久，今天下午我會去看看（格林尼治標準時間+ 1） – bigblind

這個答案似乎並沒有爲我的角度v1.2.7工作，所以我想後，對我行之有效的輕微變化：

<dl> 
    <dt ng-repeat-start="(key, value) in items">{{key}}</dt> 
    <dd ng-repeat-end>{{value}}</dd> 
</dl>

2014-01-23 02:18:57 chrisjordanme

看起來'items'是一個對象，而不是一組對象...... – PhiLho

回答