web-dev-qa-db-ja.com

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

どのようにスコープ変数と文字列の連結であるdiv属性の値を設定するには、id型のHTML要素を提供しましたか？

javascriptangularjsangularjs-scopestring-concatenation
240
Thierry Marianne

公式文書で紹介されているように、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>
370
Thierry Marianne

このことは私にはかなりうまくいきました：

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

59
Tanveer Shaikh

私がこの振る舞いを達成するために見つけたもっとエレガントな方法は単純です：

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

私の実装では、ng-repeatの各input要素がそれぞれラベルを関連付けるためのユニークな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を生成できることが非常に便利です。

22
Cumulo Nimbus

この質問に来たが、より新しい Angular version> = 2.0 に関連している場合。

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

次のようにするだけでいいのです。

あなたのjsに

$scope.id = 0;

あなたのテンプレートで

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

どちらがレンダリングされます

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

二重の中括弧で連結する必要はありません。

9
emil.c

<input id="field_name_{{$index}}" />だけ

2
D. Mohamed

この構文を使用すると、

<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>
1
K Rajesh Kumar