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/
타겟 요소를 함수에 송신하고 있기 때문에, 다음과 같이 ID 를 취득할 수 있습니다.
function doStuff(item){
var id = item.attributes['data-id'].value; // 345
}
마크업에서 doStuff($event)를 사용하면 currentTarget.getAttribute("data-id")를 통해 데이터 속성 값을 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"));
};
});
첫 번째 jsfiddle: http://jsfiddle.net/9mmd1zht/116/을 포크로 연결했습니다.
그.data()method는 jQuery에서 가져옵니다.이 메서드를 사용하려면 jQuery 라이브러리를 포함하고 다음과 같은 메서드에 액세스해야 합니다.
function doStuff(item) {
var id = $(item).data('id');
}
당신의 jsFiffle도 업데이트했습니다.
갱신하다
순수한 angularjs와 jqlite를 사용하면 다음과 같은 목표를 달성할 수 있습니다.
function doStuff(item) {
var id = angular.element(item).data('id');
}
요소로 액세스 할 수 없습니다.[]모든 jQuery 또는 jqlite 추가 메서드 없이 순수 DOM 요소를 얻을 수 있기 때문입니다.
요소의 데이터 세트 속성을 사용하여 이 작업을 수행할 수 있습니다. 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>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>
querySelector로 가져오기 위해 버튼에 클래스를 추가한 다음 데이터 속성을 가져옵니다.
var myButton = angular.element( document.querySelector( '.myButton' ) );
console.log( myButton.data( 'id' ) );
Angular2+를 사용하는 경우 다음 코드가 도움이 됩니다.
다음 구문을 사용하여 html 요소에서 속성 값을 가져올 수 있습니다.
//html 요소를 가져옵니다.
const element = fixture.debugElement.nativeElement.querySelector('name of element'); // example a, h1, p
//그 요소에서 속성 값 가져오기
const attributeValue = element.attributeName // like textContent/href
Jquery 함수 사용
<Button id="myPselector" data-id="1234">HI</Button>
console.log($("#myPselector").attr('data-id'));
언급URL : https://stackoverflow.com/questions/24673418/angularjs-get-element-attributes-values
'programing' 카테고리의 다른 글
| 컨스트럭터 또는 componentWillMount에서 초기 반응 구성 요소 상태를 설정합니다. (0) | 2023.03.25 |
|---|---|
| 각도 사용angular.module().controller()로 작성된 JS 컨트롤러 (0) | 2023.03.25 |
| 한 페이지에 여러 개의 모달 상자 열기 (0) | 2023.03.25 |
| IE에서 BLOB 다운로드가 작동하지 않습니다. (0) | 2023.03.25 |
| 공백 입력 시 ng-change를 트리거하려면 어떻게 해야 하나요? (0) | 2023.03.25 |