angularjs（1.x）でHTML要素のid属性を動的に設定するにはどうすればよいですか？

typeの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>