发表新帖
发表新帖

AngularJS - get element attributes values

后端 未结
关注
8 1385
深忆病人
深忆病人 2020-12-04 12:24

How do you get an element attribute value?

e.g. HTML element:
相关标签:
8条回答
  • 臣服心动
    2020-12-04 12:40

    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.

    0 讨论(0)
  • 终归单人心
    2020-12-04 12:41 
    <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' ) );
    0 讨论(0)
  • 渐次进展
    2020-12-04 12:44

    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
}
    0 讨论(0)
  • 别跟我提以往
    2020-12-04 12:45

    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>

    0 讨论(0)
  • 滥情空心
    2020-12-04 12:46

    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/

    0 讨论(0)
  • 无人及你
    2020-12-04 12:49

    Use Jquery functions

    <Button id="myPselector" data-id="1234">HI</Button> 
console.log($("#myPselector").attr('data-id'));
    0 讨论(0)
 看不清?
提交回复
热议问题