javascript - directivas - formularios en angular 6
AngularJS-obtener valores de atributos de elementos (8)
Como está enviando el elemento de destino a su función, puede hacer esto para obtener el ID:
function doStuff(item){
var id = item.attributes[''data-id''].value; // 345
}
¿Cómo se obtiene un valor de atributo de elemento?
por ejemplo, elemento 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
}
Cualquier sugerencia muy apreciada, demostración de JSFIDDLE aquí: http://jsfiddle.net/h3TFy/
El método .data() es de jQuery . Si desea utilizar este método, debe incluir la biblioteca jQuery y acceder al método de esta manera:
function doStuff(item) {
var id = $(item).data(''id'');
}
También actualicé tu jsFiffle
ACTUALIZAR
con pure angularjs y jqlite puedes lograr el objetivo así:
function doStuff(item) {
var id = angular.element(item).data(''id'');
}
No debe acceder al elemento con [] porque entonces obtiene el elemento DOM puro sin todos los métodos adicionales jQuery o jqlite.
Puede hacer esto usando la propiedad del conjunto de datos del elemento, usando con o sin jquery que funcione ... No conozco el navegador antiguo. Nota: que cuando usa el signo de guión (''-''), necesita usar mayúsculas y minúsculas. P.ej. ab => 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>
Si está usando Angular2 + el siguiente código ayudará
Puede usar la siguiente sintaxis para obtener el valor de atributo del elemento html
// para recuperar el elemento html
const element = fixture.debugElement.nativeElement.querySelector(''name of element''); // example a, h1, p
// obtener el valor del atributo de ese elemento
const attributeValue = element.attributeName // like textContent/href
Solo puede usar doStuff ($ event) en su marca y obtener los valores de los atributos de datos a través de currentTarget.getAttribute ("data-id")) en angular. 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"));
};
});
Bifurcó su jsfiddle inicial: http://jsfiddle.net/9mmd1zht/116/
Usa las funciones de JQuery.
<Button id="myPselector" data-id="1234">HI</Button>
console.log($("#myPselector").attr(''data-id''));
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>
Agregué clase al botón para obtener por querySelector, luego obtengo el atributo de datos
var myButton = angular.element( document.querySelector( ''.myButton'' ) );
console.log( myButton.data( ''id'' ) );