एक HTML तत्व की id विशेषता को गतिशील रूप से angularjs (1.x) के साथ कैसे सेट करें?

Question

एक HTML तत्व प्रकार प्रदान divकिया गया है id, इसकी विशेषता का मान कैसे सेट करें , जो एक स्कोप वैरिएबल और एक स्ट्रिंग का संयोजन है?

Answer 1

ngAttr निर्देश पूरी तरह से यहां मदद का हो सकता है, जैसा कि आधिकारिक दस्तावेज में पेश किया गया है

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

उदाहरण के लिए, idकिसी divतत्व का गुण मान सेट करने के लिए , ताकि उसमें एक अनुक्रमणिका हो, एक दृश्य टुकड़ा हो सकता है

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

जिसके लिए प्रक्षेपित किया जाएगा

<div id="object-1"></div>

Comments

कहाँ myScopeObjectसे आता है? मैं इसे कहां परिभाषित करूंगा?

— जनआगार्ड

@JanAagard हमें मान लें myScopeObjectकि scopeएक नियंत्रक का उपयोग करके उजागर की गई वस्तु की एक संपत्ति है । कृपया docs.angularjs.org/guide/controller भी देखें । क्या यह आपके लिए पर्याप्त स्पष्ट है या मैं आगे विस्तार करूंगा?

— थिएरी मैरिएन

मैंने ng-attr-id = "{{'' पैनल '+ file.Id}" किया, लेकिन यह मेरे लिए id = "पैनल12312" उत्पन्न नहीं करता है :(

— मैनुएल मैस्त्रिनी

व्यवहार में निम्नलिखित दो समान नहीं हैं: <div id="{{ 'object' + index }}">और <div ng-attr-id="{{ 'object' + index }}">? डॉक्स का कहना है कि प्रीपेडिंग ng-attr-उन मामलों के लिए मदद करना है जहां तत्व कुछ गैर-मानक है, जैसे कि ए नहीं <div>। क्या मैं डॉक्स सही पढ़ रहा हूं?

— ब्रोइससेइब

@ nd-attr का उपयोग करने वाले ब्रोसेब केवल मानक के बारे में नहीं है। यह अच्छा अभ्यास है क्योंकि HTML दुभाषिया तत्व को आईडी असाइन कर सकता है इससे पहले कि कोणीय लोड हो जाए। और एनजी-एटर तत्व को आईडी असाइन करना सुनिश्चित करता है जब कोणीय लोड हो जाता है। वही <img> टैग में ng-src के लिए मामला है।

— एलेक्स

Answer 2

इस बात ने मेरे लिए बहुत अच्छा काम किया:

<div id="{{ 'object-' + $index }}"></div>

Comments

समय उड़ जाता है और शायद, सबसे सहज वाक्यविन्यास अब सिर्फ उम्मीद के मुताबिक काम करता है। मुझे याद है कि किसी सूची पर चलते समय कुछ समस्याएँ होती हैं।

— थियरी मैरिएन

यह 90% मामलों में सही काम करेगा लेकिन आपको कभी-कभी ऐसी त्रुटियां मिल सकती हैं जो डीबग करना कठिन हैं। आपको इसके बजाय ng-attr-id का उपयोग करना चाहिए।

— बकी

ng-attr-id0% स्थितियों में लाभप्रद है। कोई उदाहरण नहीं दिया जा सकता है, क्योंकि कोई भी नहीं है।

— omikes

ng-attr-idविधि सुनिश्चित करना है कि कच्चे एनजी अभिव्यक्ति (उदाहरण के लिए एक वैध HTML विशेषता में प्रदान की गई कभी नहीं किया जाता है id, label, आदि)। यह 'जंक' पढ़ने के किसी भी बहाव के उपयोग को रोकने के लिए है (जैसे कि रेंडर पूरा होने से पहले, या एक जे एस दुर्घटना के बाद)

— ओवरफ्लेव करें

Answer 3

मामले में आप इस सवाल पर आए लेकिन नए कोणीय संस्करण> = 2.0 से संबंधित ।

<div [id]="element.id"></div>

Comments

यह उपयोगी नहीं है, सवाल AngularJS के संदर्भ में है

— btk

मैं सहमत हूँ; यह केवल उन सदस्यों के लिए उपयोगी होने जा रहा है जो इसे उपयोगी पाते हैं।

— SoEzPz

कुछ सदस्य अभी भी Angularjs लिंक पर क्लिक करते हैं, भले ही वे Angular लिंक खोज रहे हों। यह थोड़ा भ्रामक है और त्रुटियां होती रहेंगी।

— SoEzPz

Answer 4

इस व्यवहार को प्राप्त करने का एक और सुंदर तरीका है:

<div id="{{ 'object-' + myScopeObject.index }}"></div>

मेरे कार्यान्वयन के लिए, मैं चाहता था कि प्रत्येक इनपुट तत्व एनजी-रिपीट में प्रत्येक के साथ लेबल को संबद्ध करने के लिए एक अद्वितीय आईडी हो। तो myScopeObjects के अंदर समाहित वस्तुओं की एक सरणी के लिए यह कर सकता है:

<div ng-repeat="object in myScopeObject">
    <input id="{{object.name + 'Checkbox'}}" type="checkbox">
    <label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>

गतिशील रूप से इस तरह की सामग्री को जोड़ने पर मक्खी पर अद्वितीय आईडी उत्पन्न करने में सक्षम होना बहुत उपयोगी हो सकता है।

Comments

मुझे लगता है कि इस दृष्टिकोण में समस्याएं हैं। मैं पृष्ठ लोड होने के बाद कोणीय बंधन को प्रारंभ कर रहा हूं। अब कई बार div ठीक से लोड होने में विफल रहता है, जो मुझे लगता है कि अलग-अलग div की आईडी के टकराव के कारण है।

— सुमीत

दिलचस्प। यदि आप अपने व्यवहार को प्लंकर उदाहरण में पुन: पेश कर सकते हैं तो मुझे इसकी जांच करके खुशी होगी। क्या 'ng-attr-id =' काम का उपयोग करता है और सिर्फ 'id =' का उपयोग नहीं करता है?

— कमुलो निम्बस

Answer 5

आप बस निम्नलिखित कर सकते हैं

आपके जेएस में

$scope.id = 0;

अपने टेम्पलेट में

<div id="number-{{$scope.id}}"></div>

जो प्रस्तुत करेगा

<div id="number-0"></div>

यह डबल घुंघराले कोष्ठक के अंदर समतल करने के लिए आवश्यक नहीं है।

Answer 6

केवल <input id="field_name_{{$index}}" />

Comments

सूचकांक के सामने एक $ क्यों?

— पिपो

मुझे लगता है कि यह शायद इसलिए है क्योंकि यह एनजी-रिपीट होना चाहिए?

— gian1200

सटीक । @Pipo आप, हो सकता है चाहिए, यहाँ जाँच docs.angularjs.org/api/ng/directive/ngRepeat :)

— डी मोहम्मद

Answer 7

यदि आप इस सिंटैक्स का उपयोग करते हैं:

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

कोणीय कुछ इस तरह प्रस्तुत करेगा:

 <div ng-id="object-1"></div>

हालाँकि यह वाक्य रचना:

<div id="{{ 'object-' + $index }}"></div>

कुछ ऐसा उत्पन्न करेगा:

<div id="object-1"></div>

Comments

समझाएं कि आप क्या कहना चाह रहे हैं?

— कुमार

क्यों ng-attr-idबनाना चाहिए ng-id..? यह गलत है। मुझे आश्चर्य है कि कौन इसे आगे बढ़ाता है

— TJ