programing

AngularJS - 요소 속성 값을 가져옵니다.

megabox 2023. 3. 25. 11:01
반응형

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

반응형