AngularJS - get element attributes values

Question

How do you get an element attribute value?

e.g. HTML element:

<button data-id="345" ng-click="doStuff($element.target)">Button</button>

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/

Should be `item.getAttribute('data-id')` – adeneo Jul 10 '14 at 09:59 — adeneo, Jul 10 '14 at 09:59

score 56 · Accepted Answer · answered Jul 10 '14 at 09:55

56

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
}

answered Jul 10 '14 at 09:55

rob

1,286
11
12

4

Is this `attributes` part of the DOM or is this something AngularJS brings to the table? – Iladarsda Jul 10 '14 at 10:03
2

part of the DOM - not angular specific – rob Jul 10 '14 at 10:08
1

But how is it used in ng-click ? – sabsab Apr 01 '15 at 15:03
if data-id is {{ data }} it return "{{ data }}" instead the value of data :( – imaginabit May 09 '17 at 08:40

andreaslangsays · Answer 2 · 2018-06-26T07:12:24.313

18

You just can use doStuff($event) in your markup and get the data-attribute values via currentTarget.getAttribute("data-id")) in angular. HTML:

<div ng-controller="TestCtrl">
    <button data-id="345" ng-click="doStuff($event)">Button</button>
</div>

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/

edited Jun 26 '18 at 07:12

answered Jan 18 '16 at 09:38

andreaslangsays

329
4
7

1

As far as I know it works on all current Browsers. All browsers angularJS is running on. – andreaslangsays Jul 25 '16 at 15:49
tested on angluar 6 – nobjta_9x_tq Aug 20 '18 at 10:59

jigfox · Answer 3 · 2014-07-10T11:02:25.260

16

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.

edited Jul 10 '14 at 11:02

answered Jul 10 '14 at 10:00

jigfox

18,057
3
60
73

As per AngularJS documentation,jQLite with the data() is included in the AngulaJS source: https://docs.angularjs.org/api/ng/function/angular.element , hence I assumed the API for the `data() method` is the same as jQuery – Iladarsda Jul 10 '14 at 10:01
1

you're right and wrong: the `.data()` method is the same, but if you access the element with `[]` then you you get a pure DOM element and loose all extra functionality added by jqlite or jQuery – jigfox Jul 10 '14 at 11:04
1

Can you get a specific attr with `.data('key')`? – Iladarsda Jul 10 '14 at 11:52
4

No, with `.data('key')` you get only attributes starting with `data-` (in you example the value of `data-key="someValue"`, if you want to access other attributes, you must use `.attr('attributeName')` – jigfox Jul 10 '14 at 11:55
...and this is why custom attribute names should start with 'data-' (best practice). – Fabien Haddadi Aug 11 '20 at 15:26
This post is old. Now you may have to use `.dataset.attrname` . Use your dev console to see the object returned by `.dataset` . – Fabien Haddadi Aug 11 '20 at 15:42

score 0 · Answer 4 · answered Oct 28 '15 at 13:32

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 => aB

function onContentLoad() {
  var item = document.getElementById("id1");
  var x = item.dataset.x;
  var data = item.dataset.myData;

  var resX = document.getElementById("resX");
  var resData = document.getElementById("resData");

  resX.innerText = x;
  resData.innerText = data;

  console.log(x);
  console.log(data);
}

<body onload="onContentLoad()">
  <div id="id1" data-x="a" data-my-data="b"></div>

  Read 'x':
  <label id="resX"></label>
  <br/>Read 'my-data':
  <label id="resData"></label>
</body>

score 0 · Answer 5 · answered Nov 29 '16 at 06:02

function onContentLoad() {
  var item = document.getElementById("id1");
  var x = item.dataset.x;
  var data = item.dataset.myData;

  var resX = document.getElementById("resX");
  var resData = document.getElementById("resData");

  resX.innerText = x;
  resData.innerText = data;

  console.log(x);
  console.log(data);
}

<body onload="onContentLoad()">
  <div id="id1" data-x="a" data-my-data="b"></div>

  Read 'x':
  <label id="resX"></label>
  <br/>Read 'my-data':
  <label id="resData"></label>
</body>

score 0 · Answer 6 · answered May 10 '17 at 12:23

<button class="myButton" data-id="345" ng-click="doStuff($element.target)">Button</button>

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' ) );

score 0 · Answer 7 · answered Jul 11 '18 at 10:46

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

score -1 · Answer 8 · answered Jul 10 '14 at 10:01

-1

Use Jquery functions

<Button id="myPselector" data-id="1234">HI</Button> 
console.log($("#myPselector").attr('data-id'));

answered Jul 10 '14 at 10:01

user3076765

41

1

with jQuery it would be better `$("#myPselector").data('id')` – jigfox Jul 10 '14 at 11:08
I am not able to get attr value using `$('#datasheet_link').data('href')` but able to get value using '$('#datasheet_link').attr('href')' . Any ideas ? – Moon Nov 30 '19 at 09:57

AngularJS - get element attributes values

8 Answers8

Linked