47

だから私はng-repeatこのようなものの中にいます：

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL">name</label>
       <input  id="UNIQUELABEL">
       <label for="ANOTHERUNIQUELABEL">name2</label>
       <input  id="ANOTHERUNIQUELABEL">
    </form>
</li>

これは次のようなものを生成するはずです

<li>
    <form>
       <label for="UNIQUELABEL1">name</label>
       <input  id="UNIQUELABEL1">
       <label for="ANOTHERUNIQUELABEL1">name2</label>
       <input  id="ANOTHERUNIQUELABEL1">
    </form>
</li>
<li>
    <form>
       <label for="UNIQUELABEL2">name</label>
       <input  id="UNIQUELABEL2">
       <label for="ANOTHERUNIQUELABEL2">name2</label>
       <input  id="ANOTHERUNIQUELABEL2">
    </form>
</li>
...

私はAngularJSを初めて使用しますが、これにアプローチする正しい方法がわかりません（どのドキュメントも使用labelしていません）。

4

3 に答える 3

40

正しい解決策はGlenoのものです。

$id$index下線を引くコレクションの数を変更すると変更されますが、作成されたスコープごとに一意であることが保証されます。

リピーターのスコープで使用可能な$indexプロパティ（ゼロベース）を追加する必要があります

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL{{$index+1}}">name</label>
       <input  id="UNIQUELABEL{{$index+1}}">
       <label for="ANOTHERUNIQUELABEL{{$index+1}}">name2</label>
       <input  id="ANOTHERUNIQUELABEL{{$index+1}}">
    </form>
</li>
于 2013-02-02T15:40:10.103 に答える
35

ng-repeat反復ごとに新しいスコープオブジェクトを提供するので、私は次のようなものを使用することを好みます

<li ng-repeat="x in xs">
    <form>
       <label for="UNIQUELABEL{{::$id}}_1">name</label>
       <input  id="UNIQUELABEL{{::$id}}_1">
       <label for="UNIQUELABEL{{::$id}}_2">name2</label>
       <input  id="UNIQUELABEL{{::$id}}_2">
    </form>
</li>

この方法の利点は、ドキュメント上に同じIDを持つ重複するセレクターがないことが保証されていることです。そうしないと、ルーティングまたはアニメーション化時に重複が発生しやすくなります。

于 2014-08-09T17:45:30.303 に答える
12

<input>多くのシナリオでは、より良い解決策は、テキストとラベルテキストの両方を単一の<label>要素で囲むことです。これは完全に有効なHTMLであり、すべてのブラウザーで適切に機能し、イテレーター変数を使用する必要がないため、階層データで簡単に使用できるという追加の利点があります。

<li ng-repeat="x in xs">
   <label>
       Label Text
       <input type="text">
   </label>
</li>
于 2014-09-24T16:39:31.430 に答える