Jak uzyskać wartość atrybutu elementu?AngularJS - uzyskaj wartości atrybutów elementu
np. Element 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
}
Wszelkie sugestie znacznie ceniona, JSFIDDLE demo tutaj: http://jsfiddle.net/h3TFy/
Ponieważ wysyłasz element docelowy do swojej funkcji, można to zrobić Aby uzyskać identyfikator:
function doStuff(item){
var id = item.attributes['data-id'].value; // 345
}
Metoda .data() pochodzi z jQuery. Jeśli chcesz korzystać z tej metody, musisz dołączyć bibliotekę jQuery oraz dostęp do metody takie jak to:
function doStuff(item) {
var id = $(item).data('id');
}
ja również zaktualizowane jsFiffle
UPDATE
z czystych angularjs i jqlite możesz osiągnąć cel taki jak: this:
function doStuff(item) {
var id = angular.element(item).data('id');
}
Musisz nie można uzyskać dostępu do elementu za pomocą [], ponieważ wtedy uzyskuje się czysty element DOM bez wszystkich dodatkowych metod jQuery lub jqlite.
Zgodnie z dokumentacją AngularJS, jQLite z danymi() jest zawarty w Źródło AngulaJS: https://docs.angularjs.org/api/ng/function/angular.element, dlatego założyłem, że interfejs API dla metody 'data()' jest taki sam jak jQuery – Iladarsda
. Masz rację i zło: Metoda '.data()' jest taka sama, ale jeśli uzyskasz dostęp do elementu za pomocą '[]', otrzymasz czysty element DOM i stracisz wszystkie dodatkowe funkcje dodane przez jqlite lub jQuery – jigfox
. Możesz uzyskać konkretną wartość atra za pomocą '. data ('klucz') '? – Iladarsda
użyć jQuery działa
<Button id="myPselector" data-id="1234">HI</Button>
console.log($("#myPselector").attr('data-id'));
z jQuery byłoby lepiej '$ (" # myPselector "). data ('id')' – jigfox
Można to zrobić za pomocą właściwości zestawu danych elementu, korzystając z lub bez jQuery to działa ... Nie jestem świadom stary przeglądarka Uwaga: że podczas korzystania kreska ("-"), musisz użyć klucza wielkości. Na przykład. 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>Po prostu można używać DoStuff ($ event) w znacznikach i uzyskać danych atrybut wartości poprzez currentTarget.getAttribute ("data-id")) w kanciasty. 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"));
};
});
Rozwidlona początkowej jsfiddle: http://jsfiddle.net/9mmd1zht/1/
Czy to działa we wszystkich przeglądarkach? –
O ile mi wiadomo, działa na wszystkich obecnych przeglądarkach. Wszystkie przeglądarki angularJS są uruchomione. – 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>
dodałem klasę przycisk, aby dostać się przez querySelector, a następnie uzyskać atrybut danych
var myButton = angular.element(document.querySelector('.myButton'));
console.log(myButton.data('id'));
powinno być 'item.getAttribute ('data-id')' – adeneo