web-dev-qa-db-fra.com

AngularJS - Récupère les valeurs des attributs d'élément

Comment obtenez-vous une valeur d'attribut d'élément?

par exemple. Élément 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
}

Toutes les suggestions sont très appréciées, démo JSFIDDLE ici: http://jsfiddle.net/h3TFy/

javascriptangularjsangularjs-scopejqlite
46
Iladarsda

Puisque vous envoyez l'élément cible à votre fonction, vous pouvez le faire pour obtenir l'identifiant:

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

Vous pouvez simplement utiliser doStuff ($ event) dans votre balisage et obtenir les valeurs d'attribut de données via currentTarget.getAttribute ("data-id")) de manière angulaire. 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 votre jsfiddle initial: http://jsfiddle.net/9mmd1zht/116/

16
andreaslangsays

la méthode .data() provient de jQuery . Si vous souhaitez utiliser cette méthode, vous devez inclure la bibliothèque jQuery et accéder à la méthode de la manière suivante:

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

J'ai également mis à jour votre jsFiffle

UPDATE

avec angularjs pure et le jqlite, vous pouvez atteindre l’objectif tel que this :

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

Vous ne devez pas accéder à l'élément avec [] car vous obtenez alors l'élément DOM pur sans toutes les méthodes supplémentaires jQuery ou jqlite.

16
jigfox

Vous pouvez le faire en utilisant la propriété dataset de l'élément, en utilisant avec ou sans jquery, cela fonctionne ... Je ne suis pas au courant de l'ancien navigateur Remarque: lorsque vous utilisez le signe dash ('-'), vous devez utiliser la casse. Par exemple. 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

Si vous utilisez Angular2 +, le code suivant vous aidera

Vous pouvez utiliser la syntaxe suivante pour obtenir la valeur d'attribut d'un élément html

// pour récupérer un élément HTML

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

// obtient la valeur d'attribut de cet élément

  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>

J'ai ajouté la classe au bouton pour obtenir par querySelector, puis obtenir l'attribut de données

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