programing

다이내믹 ID ng-module

megabox 2023. 2. 11. 09:07
반응형

다이내믹 ID ng-module

ng-repeat에서 div에 다이내믹 ID를 설정하려고 합니다.예를 들어 보겠습니다.

<div id="$index" ng-repeat="repeat in results.myJsonResults">
    <div id="$index" ng-click="saveID($index)" ng-repeat="subRepeat in results.myJsonResults.subresults">
</div>

문제는 자녀 div를 클릭했을 때 부모 ID 이름을 얻고 싶은데 angular가 ID를 div에 제대로 설정하지 않는 것 같습니다.이 개념으로 다이내믹 ID를 설정할 수 있습니까?

PS: 과거에 컨트롤러로 카운터 메서드를 생성하여 인덱스를 설정하려고 했는데, 각도가 이 ID의 마지막 값만 인식하는 것으로 나타났습니다.

질문에 답변하려면 다음을 수행하십시오.

<div id="{{$index}}" ...>

상기의 조작은 가능하지만, 실제로는 이것이 필요 없는 경우가 있습니다(!).이것은 Angular에서는 드문 일이라는 점에 주의해 주십시오.JS는 요소를 id로 참조하여 조작합니다.

모델에 초점을 맞춰 UI를 선언적으로 설명하고 Angular가JS는 "수동으로" 낮은 수준의 DOM 조작을 수행하지 않고 나머지를 수행합니다.

제가 생각할 수 있는 사용 사례는<label>각각의 요소.<input>요소(http://jsfiddle.net/YqUAp/ 참조)

적용된 것은 pkozlowski.opensource 메서드입니다.

<label for="{{ 'textField-' + $index }}">Option {{ $index }}</label>
<input type="text" id="{{ 'textField-' + $index }}" ng-model="field"/>

이것이 가장 효과적인 방법인지는 잘 모르겠습니다.(가독성을 위해서라도)

<div id="{{$index}}" ...>

정상적으로 동작하지만, 예를 들어 subRepeat에 id 필드가 있는 경우 필드를 반복하여 동적 ID를 넣을 수도 있습니다.즉, 다음과 같습니다.

<div id="subRepeat{{subRepeat.id}}" ...>

subRepeat1, subRepeat2, 등의 ID가 배치됩니다.당신의 거듭된 점괘로

개체에서 인덱스를 유지해야 합니다.

results = { myJsonResults : [ 
    { name: "abc", id: 1, subResults: [
                               { subName: "123", id: 1 },
                               { subName: "456", id: 2 }] }
    { name: "xyz", id: 2, subResults: [
                               { subName: "789", id: 1 },
                               { subName: "098", id: 2 }] }
                            ] };

또한 반복은 결과를 참조하고 연결을 끊습니다. 대신 다음 결과를 사용하십시오.

<div id="thisResult.id" ng-repeat="thisResult in results.myJsonResults">
    {{ thisResult.name }}
    <div id="subResult.id" ng-click="saveID(subResult.id)" ng-repeat="subResult in thisResult.subResults"> {{ subResult.subName }} </div>
</div>

언급URL : https://stackoverflow.com/questions/15301746/dynamic-id-ng-repeat

반응형