如何通过classname或id获取元素

我想通过angularjs在html中find元素。

这里是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/> 

我想通过类名称多文件得到button元素，然后我试过

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

但它不工作，并尝试element.find但它只适用于标记。

有没有什么函数可以通过id或classname在angularjs中获取元素？

Answer 1

getElementsByClassName是DOM文档中的一个函数。 它既不是一个jQuery，也不是一个jqLit​​e函数。

使用时不要在课程名称前添加：

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

把它包装在jqLit​​e中（或者jQuery在Angular之前加载的话）：

 var wrappedResult = angular.element(result); 

如果要从指令的链接函数中selectelement ，则需要访问DOM引用，而不是使用jqLit​​e引用 – element[0]而不是element ：

 link: function (scope, element, attrs) { var elementResult = element[0].getElementsByClassName('multi-files'); } 

或者，您可以使用document.querySelector函数（如果按类select，则需要在此处input句号）：

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

演示： http : //plnkr.co/edit/AOvO47ebEvrtpXeIzYOH?p=preview

Answer 2

你不必添加一个. 在getElementsByClassName ，即

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

要不就

 angular.element('multi-files'); 

应该做的伎俩。

另外，从这个文档中， “如果jQuery可用，angular.element是jQuery函数的别名，如果jQuery不可用，angular.element委托给Angular的jQuery内置子集，称为”jQuery lite“或”jqLit​​e“。 “”

Answer 3

@ 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

Answer 4

如果你只想通过它的类名findbutton，而只使用jQLite，你可以像下面这样做：

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

希望这可以帮助。 🙂