javascript - AngularJS - 获取元素属性值

Question

如何获取元素属性值？

例如 HTML 元素：

<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
}

非常感谢任何建议，JSFIDDLE 演示在这里：http: //jsfiddle.net/h3TFy/

score 56 · Accepted Answer

由于您将目标元素发送到您的函数，您可以这样做来获取 id：

function doStuff(item){
    var id = item.attributes['data-id'].value; // 345
}

score 18 · Accepted Answer

您只需在标记中使用 doStuff($event) 并通过 currentTarget.getAttribute("data-id")) 以角度获取数据属性值。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"));
    };
});

分叉你最初的 jsfiddle：http: //jsfiddle.net/9mmd1zht/116/

score 16 · Accepted Answer

该.data()方法来自jQuery。如果你想使用这个方法，你需要包含 jQuery 库并像这样访问该方法：

function doStuff(item) {
  var id = $(item).data('id');
}

我还更新了你的jsFiffle

更新

使用纯 angularjs 和 jqlite，您可以实现这样的目标：

function doStuff(item) {
  var id = angular.element(item).data('id');
}

您不能访问该元素，[]因为这样您就获得了没有所有 jQuery 或 jqlite 额外方法的纯 DOM 元素。

score 0 · Accepted Answer

您可以使用元素的 dataset 属性执行此操作，使用或不使用 jquery 它都可以工作...我不知道旧浏览器注意：当您使用破折号（'-'）符号时，您需要使用大写字母。例如。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 · Accepted Answer

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

我将类添加到按钮以通过 querySelector 获取，然后获取数据属性

var myButton = angular.element( document.querySelector( '.myButton' ) );
console.log( myButton.data( 'id' ) );

score 0 · Accepted Answer

如果您使用的是 Angular2+，下面的代码会有所帮助

您可以使用以下语法从 html 元素中获取属性值

//获取html元素

const element = fixture.debugElement.nativeElement.querySelector('name of element'); // example a, h1, p

//获取该元素的属性值

  const attributeValue = element.attributeName // like textContent/href

score 0 · Accepted Answer

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 -1 · Accepted Answer

使用 Jquery 函数

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

javascript - AngularJS - 获取元素属性值

8 回答 8

Related

Reference