मैं AngularJS का उपयोग करके गतिशील परिभाषा सूची कैसे प्रस्तुत करूं?

Question

मैं AngularJS का उपयोग करके गतिशील परिभाषा सूची कैसे प्रस्तुत करूं?

उदाहरण:

डाटा:

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

वांछित HTML:

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

http://docs.angularjs.org/tutorial/step_08 पर उदाहरण: DDS और एक की एक गतिशील संख्या के लिए

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

काम करता है स्थिर एनयू डीटीएस का मबर, लेकिन दोनों की गतिशील संख्या नहीं।

Answer 1

एक नई सुविधा जो एनजी-दोहराना शुरू/एनजी-दोहराना अंत को कोणीय 1.2 में जोड़ा गया था।

इस सुविधा के साथ, आप इस तरह अपने html लिख सकते हैं:

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

एक पूर्ण काम कर उदाहरण के लिए this plnkr देखें।

Answer 2

यह एक समस्या है, क्योंकि आपको दोहराने के लिए इसे कुछ तत्वों से लपेटने की आवश्यकता है। और वह वाला एक मान्य एचटीएमएल नहीं है - आप बिना क्रम वाली सूची या तालिकाओं के साथ एक ही मुसीबत में हैं ...

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

मुझे लगता है कि dl अंदर div कल्पना द्वारा अनुमति नहीं है, लेकिन यह काम करता है - कम से कम में क्रोम :- डी

हम इस समर्थन के लिए एक टिप्पणी के अंदर ng-repeat का समर्थन करने की योजना बना रहे हैं।

Answer 3

मैंने इस तरह की समस्याओं को हल करने के लिए repeatInside नामक एक निर्देश बनाया है।

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

Answer 4

इस उत्तर कोणीय v1.2.7 में मेरे लिए काम नहीं लगता था तो मैं थोड़ा अंतर होता है कि मेरे लिए अच्छी तरह से काम पोस्ट करने के लिए चाहता था:

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