AngularJS - get element attributes values

Question

How do you get an element attribute value   e g   HTML element     lt button data-id  345  ng-click  doStuff  element target   gt Button lt  button gt    JS   function doStuff item       angular element item  0  data  id       undefined is not a function     Any suggestions much appreciated   JSFIDDLE demo here http   jsfiddle net h3TFy

User · Answer

If you are using Angular2  following code will help  You can use following syntax to get attribute value from html element    to retrieve html element  const element   fixture debugElement nativeElement querySelector  name of element       example a  h1  p     get attribute value from that element    const attributeValue   element attributeName    like textContent href

User · Answer

You can do this using dataset property of the element  using with or without jquery it work    i m not aware of old browser Note  that when you use dash   -   sign  you need to use capital case  Eg  a-b   gt  aB   x000D   x000D  function onContentLoad     x000D    var item   document getElementById  id1    x000D    var x   item dataset x  x000D    var data   item dataset myData  x000D   x000D    var resX   document getElementById  resX    x000D    var resData   document getElementById  resData    x000D   x000D    resX innerText   x  x000D    resData innerText   data  x000D   x000D    console log x   x000D    console log data   x000D    x000D   lt body onload  onContentLoad    gt  x000D     lt div id  id1  data-x  a  data-my-data  b  gt  lt  div gt  x000D   x000D    Read  x   x000D     lt label id  resX  gt  lt  label gt  x000D     lt br  gt Read  my-data   x000D     lt label id  resData  gt  lt  label gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

the  data   method is from jQuery  If you want to use this method you need to include the jQuery library and access the method like this   function doStuff item      var id     item  data  id        I also updated your jsFiffle  UPDATE  with pure angularjs and the jqlite you can achieve the goal like this   function doStuff item      var id   angular element item  data  id        You must not access the element with    because then you get the pure DOM element without all the jQuery or jqlite extra methods

User · Answer

Since you are sending the target element to your function  you could do this to get the id   function doStuff item       var id   item attributes  data-id   value     345

User · Answer

lt button class  myButton  data-id  345  ng-click  doStuff  element target   gt Button lt  button gt    I added class to button to get by querySelector  then get data attribute   var myButton   angular element  document querySelector    myButton       console log  myButton data   id

User · Answer

x000D   x000D  function onContentLoad     x000D    var item   document getElementById  id1    x000D    var x   item dataset x  x000D    var data   item dataset myData  x000D   x000D    var resX   document getElementById  resX    x000D    var resData   document getElementById  resData    x000D   x000D    resX innerText   x  x000D    resData innerText   data  x000D   x000D    console log x   x000D    console log data   x000D    x000D   lt body onload  onContentLoad    gt  x000D     lt div id  id1  data-x  a  data-my-data  b  gt  lt  div gt  x000D   x000D    Read  x   x000D     lt label id  resX  gt  lt  label gt  x000D     lt br  gt Read  my-data   x000D     lt label id  resData  gt  lt  label gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Use Jquery functions   lt Button id  myPselector  data-id  1234  gt HI lt  Button gt   console log     myPselector   attr  data-id

User · Answer

You just can use doStuff  event  in your markup and get the data-attribute values via  currentTarget getAttribute  data-id    in angular  HTML    lt div ng-controller  TestCtrl  gt       lt button data-id  345  ng-click  doStuff  event   gt Button lt  button gt   lt  div gt    JS   var app   angular module  app        app controller  TestCtrl   function   scope         scope doStuff   function  item            console log item currentTarget           console log item currentTarget getAttribute  data-id                  Forked your initial jsfiddle  http   jsfiddle net 9mmd1zht 116

[javascript] AngularJS - get element attributes values

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-scope

Examples related to jqlite