web-dev-qa-db-ja.com

AngularJS-要素の属性値を取得

要素の属性値を取得するにはどうすればよいですか？

例えば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/

javascriptangularjsangularjs-scopejqlite
46
Iladarsda

ターゲット要素を関数に送信しているため、これを実行してIDを取得できます。

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

マークアップでdoStuff（$ event）を使用し、angularで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/

16
andreaslangsays

.data()メソッドは jQuery からのものです。このメソッドを使用する場合は、jQueryライブラリを含めて、次のようにメソッドにアクセスする必要があります。

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

jsFiffle も更新しました

UPDATE

純粋なanglejsとjqliteを使用すると、 this のような目標を達成できます：

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

[]を使用して要素にアクセスしないでください。jQueryまたはjqliteのすべての追加メソッドなしで純粋なDOM要素を取得するためです。

16
jigfox

これは、要素のデータセットプロパティを使用して行うことができ、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>
0
deadManN

Angular2 +を使用している場合、次のコードが役立ちます

次の構文を使用して、html要素から属性値を取得できます。

// html要素を取得する

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

//その要素から属性値を取得します

  const attributeValue = element.attributeName // like textContent/href
0
Vijay Barot
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
Thanh Phu
<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' ) );
0
Surjit Sidhu