क्लासनाम या आईडी द्वारा तत्व कैसे प्राप्त करें

125

मैं html में angularjs द्वारा तत्व खोजने की कोशिश कर रहा हूं।

यहाँ HTML है:

<button class="btn btn-primary multi-files" type="button">
   <span>Choose multiple files</span>
</button>
<br/><br/>
<input ng-file-select type="file" multiple  style="display: none"/><br/>

मैं क्लास नाम मल्टी-फाइल्स द्वारा बटन तत्व प्राप्त करने की कोशिश कर रहा हूं, फिर मैंने कोशिश की

var multibutton = angular.element(element.getElementsByClassName(".multi-files"));

लेकिन यह काम नहीं करता है, और कोशिश करता है, element.findलेकिन यह केवल टैग के लिए काम करता है।

क्या कोई फ़ंक्शन है जो एंगुलरज में आईडी या क्लासनाम द्वारा तत्व प्राप्त कर सकता है?

angularjs

— जस्टिन
स्रोत

शायद यह मदद करता है: stackoverflow.com/questions/20801843/…

— Wim Deblauwe

आपको एक निर्देश भी बनाने की जरूरत नहीं है .. आप बस एनजी-क्लिक जैसे हैंडलर जोड़ सकते हैं। सबसे खराब स्थिति, यदि आप वास्तव में तत्व प्राप्त करना चाहते हैं, तो आप हमेशा jQuery वाक्यविन्यास का उपयोग कर सकते हैं।

— लुकास होल्ट

187

getElementsByClassNameDOM डॉक्यूमेंट पर एक फंक्शन है। यह न तो एक jQuery है और न ही एक jqLite फ़ंक्शन है।

उपयोग करते समय वर्ग के नाम से पहले की अवधि न जोड़ें:

var result = document.getElementsByClassName("multi-files");

इसे jqLite में लपेटें (या jQuery को यदि jQuery को Angular से पहले लोड किया गया है):

var wrappedResult = angular.element(result);

यदि आप elementनिर्देश के लिंक फ़ंक्शन से चयन करना चाहते हैं, तो आपको jqLite संदर्भ के बजाय DOM संदर्भ का उपयोग करने की आवश्यकता है - element[0]इसके बजाय element:

link: function (scope, element, attrs) {

  var elementResult = element[0].getElementsByClassName('multi-files');
}

वैकल्पिक रूप से आप document.querySelectorफ़ंक्शन का उपयोग कर सकते हैं (वर्ग द्वारा चयन करने पर यहां अवधि की आवश्यकता है):

var queryResult = element[0].querySelector('.multi-files');
var wrappedQueryResult = angular.element(queryResult);

डेमो: http://plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?==view

— tasseKATT
स्रोत

1

यह ध्यान देने योग्य हो सकता है कि लिंक फ़ंक्शन के अंदर, element.childElementCount 0 हो सकता है क्योंकि कोणीय को अभी तक तत्व बनाने का मौका नहीं मिला है, इसलिए आपको तत्व [0] .getElement के लिए कोई परिणाम नहीं देने के लिए तैयार रहना चाहिए। ।

— डायलंटेपिगुय

27

आप एक .में getElementsByClassName, यानी जोड़ने की जरूरत नहीं है

var multibutton = angular.element(element.getElementsByClassName("multi-files"));

हालांकि, उपयोग करते समय angular.element, आपको jquery शैली चयनकर्ताओं का उपयोग करना होगा:

angular.element('.multi-files');

चाल चलनी चाहिए।

इसके अलावा, इस दस्तावेज़ से "यदि jQuery उपलब्ध है, तो angular.element jQuery फ़ंक्शन के लिए एक उपनाम है। यदि jQuery उपलब्ध नहीं है, तो Angular.element, Angular के बिल्ट-इन सबटाइटल को दर्शाता है, जिसे" JQuery लाइट "या" jqLite कहा जाता है। ""

— Ashesh
स्रोत

नमस्ते, उत्तर के लिए धन्यवाद, मैंने कोशिश की, लेकिन त्रुटि अपरिभाषित समारोह का कहना है

— जस्टिन

यह काम कर सकता है या नहीं, हाँ। कृपया अब मेरे उत्तर की जाँच करें (संपादित करें) और आपको शायद पता होगा कि क्या करना है।

— आशीष

यदि फ़ंक्शन अपरिभाषित है, तो संभवतः आपने jquery को लोड नहीं किया है। jqlite (जिसका उपयोग यदि आप @ jesh के रूप में jquery को लोड नहीं करते हैं तो किया जाता है) में jquery के सभी कार्य नहीं हैं, और getElementsByClassName उनमें से एक है।

— हैमिलिट

5

angular.element ( 'बहु फ़ाइलें'); काम नहीं करेगा। आपको अवधि की आवश्यकता है।

— फिलिप जियोसेफी

var multibutton = angular.element (document.getElementsByClassName ("मल्टी-फाइल्स"));

— सलमान लोन

20

@ tasseKATT का जवाब बहुत अच्छा है, लेकिन अगर आप निर्देश नहीं बनाना चाहते हैं, तो उपयोग क्यों नहीं करते $document?

.controller('ExampleController', ['$scope', '$document', function($scope, $document) {
  var dumb = function (id) {
  var queryResult = $document[0].getElementById(id)
  var wrappedID = angular.element(queryResult);
  return wrappedID;
};

PLUNKR

— अरी
स्रोत

2

angular.element('#Your element id')वही काम करता है।

— गबलर

3

यह कोणीय 1.5.8 में यह त्रुटि दे रहा है। "चयनकर्ताओं के माध्यम से तत्वों को देखना jqLite द्वारा समर्थित नहीं है"

— एसपी सिंह

-4

यदि आप बटन को केवल उसके वर्ग के नाम और केवल jQLite का उपयोग करके ढूंढना चाहते हैं, तो आप नीचे की तरह कर सकते हैं:

var myListButton = $document.find('button').filter(function() {
    return angular.element(this).hasClass('multi-files');
});

उम्मीद है की यह मदद करेगा। :)

— देबायन दास
स्रोत

1

यह कोणीय और jquery का उपयोग नहीं कर रहा है, साथ ही, गलत क़ानून, आप वास्तव में jqlite को बदलने के लिए jquery का उपयोग कर सकते हैं। वेनिला जावास्क्रिप्ट तत्व ($ दस्तावेज [0)) के नीचे जाने के बिना, कोणीय वातावरण में ऐसा करने का यह सही तरीका है।

— डेनिस बार्टलेट