Wie erhalten Sie einen Elementattributwert?AngularJS - Elementattributwerte abrufen
z.B. 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
}
Irgendwelche Vorschläge sehr geschätzt, JSFIDDLE Demo hier: http://jsfiddle.net/h3TFy/
Da Sie das Zielelement an Ihre Funktion senden, könnten Sie dies tun Um die ID zu erhalten:
function doStuff(item){
var id = item.attributes['data-id'].value; // 345
}
ist die .data() Methode von jQuery. Wenn Sie diese Methode Sie die jQuery-Bibliothek aufnehmen müssen verwenden und Zugriff auf die Methode wie folgt:
function doStuff(item) {
var id = $(item).data('id');
}
ich auch Ihre aktualisierte jsFiffle
UPDATE
mit reinem AngularJS und der jqlite
function doStuff(item) {
var id = angular.element(item).data('id');
}
Sie müssen: Sie können das Ziel wie this erreichen nicht auf das Element mit [] zugreifen, denn dann erhalten Sie das reine DOM-Element ohne alle jQuery oder jqlite extra Methoden.
Laut AngularJS Dokumentation, jQLite mit den Daten() ist in der AngulaJS Quelle: https://docs.angularjs.org/api/ng/function/angular.element, daher nahm ich an, dass die API für die 'data() Methode 'dieselbe ist wie jQuery – Iladarsda
Sie haben Recht und Unrecht: die '.data()' Methode ist die gleiche, aber wenn Sie auf das Element mit '[]' dann erhalten Sie ein reines DOM-Element und verlieren alle zusätzlichen Funktionen von jqlite oder jQuery hinzugefügt – jigfox
Können Sie eine bestimmte attr mit '. data ('key') '? – Iladarsda
Verwendung JQuery Funktionen
<Button id="myPselector" data-id="1234">HI</Button>
console.log($("#myPselector").attr('data-id'));
mit jQuery verwenden besser '$ (" # myPselector "). data ('id')' – jigfox
Sie können diese unter Verwendung von Daten-Set-Eigenschaft des Elements tun, mit der Verwendung oder ohne jquery es funktioniert ... Ich bin mir nicht bewusst alten Browser Hinweis: dass, wenn Sie verwenden Strich ('-') Zeichen, müssen Sie Großbuchstaben verwenden. Z.B. 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>Sie können nur doStuff verwenden ($ event) in Ihrem Markup und bekommen die Daten-Attributwerte über currentTarget.getAttribute ("data-id")) in Winkel. 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"));
};
});
Ihre erste jsfiddle Gespaltene: http://jsfiddle.net/9mmd1zht/1/
Funktioniert das auf allen Browsern? –
Soweit ich weiß funktioniert es auf allen aktuellen Browsern. Alle Browser, auf denen angularJS läuft. – andreaslangsays
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><button class="myButton" data-id="345" ng-click="doStuff($element.target)">Button</button>
I-Klasse-Taste hinzugefügt von querySelector zu bekommen, dann Daten erhalten Attribut
var myButton = angular.element(document.querySelector('.myButton'));
console.log(myButton.data('id'));
sein sollte 'item.getAttribute ('data-id')' – adeneo