angularjs (1.x)를 사용하여 HTML 요소의 id 속성을 동적으로 설정하는 방법은 무엇입니까?

유형의 HTML 요소 div, id속성 값을 설정하는 방법 , 범위 변수와 문자열을 연결하는 방법을 제공합니까?

ngAttr 지시문은 공식 문서에 소개 된 것처럼 여기에서 완전히 도움이 될 수 있습니다.

https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes

예를 들어, 색인을 포함하도록 요소 의 id속성 값 을 설정하려면 div뷰 단편에

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

보간되는

<div id="object-1"></div>

이 일은 저에게 아주 효과적이었습니다.

<div id="{{ 'object-' + $index }}"></div>

이 질문에 왔지만 최신 Angular 버전> = 2.0 과 관련이있는 경우 .

<div [id]="element.id"></div>

이 동작을 달성하는 더 우아한 방법은 다음과 같습니다.

<div id="{{ 'object-' + myScopeObject.index }}"></div>

내 구현을 위해 ng-repeat의 각 입력 요소에 레이블을 연결할 고유 ID가 필요했습니다. 따라서 myScopeObjects에 포함 된 객체 배열의 경우 다음을 수행 할 수 있습니다.

<div ng-repeat="object in myScopeObject">
    <input id="{{object.name + 'Checkbox'}}" type="checkbox">
    <label for="{{object.name + 'Checkbox'}}">{{object.name}}</label>
</div>

이와 같이 콘텐츠를 동적으로 추가 할 때 고유 한 ID를 즉석에서 생성 할 수 있으면 매우 유용 할 수 있습니다.

당신은 단순히 다음을 할 수 있습니다

당신의 js에서

$scope.id = 0;

템플릿에서

<div id="number-{{$scope.id}}"></div>

렌더링됩니다

<div id="number-0"></div>

이중 중괄호 안에 연결할 필요는 없습니다.

다만 <input id="field_name_{{$index}}" />

이 구문을 사용하는 경우 :

<div ng-attr-id="{{ 'object-' + myScopeObject.index }}"></div>

Angular는 다음과 같이 렌더링합니다 :

 <div ng-id="object-1"></div>

그러나이 구문은 다음과 같습니다.

<div id="{{ 'object-' + $index }}"></div>

다음과 같은 것을 생성합니다 :

<div id="object-1"></div>