angularjs(1.x)를 사용하여 HTML 요소의 id 속성을 동적으로 설정하려면 어떻게 해야 합니까?

angularjs(1.x)를 사용하여 HTML 요소의 id 속성을 동적으로 설정하려면 어떻게 해야 합니까?

유형의 HTML 요소를 제공했습니다.div, 그 값을 설정하는 방법idattribute, 스코프 변수와 문자열의 결합은 무엇입니까?

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>

언급URL : https://stackoverflow.com/questions/23655009/how-to-set-the-id-attribute-of-a-html-element-dynamically-with-angularjs-1-x