web-dev-qa-db-ja.com

Angular ng-containerに相当するAngularJS

Angular ng-container ？と同等のAngularJSですか？

または、トランスクルードディレクティブを使用して自分で何かを作成する必要がありますか？

ユースケースの例：

  1. セルのインターレースペア、トリプルなどのテーブル：

    <table><tr>
  <ng-container ng-repeat="item in items">
    <td>{{ item.a }}</td>
    <td>{{ item.b }}</td>
  </ng-container>
</tr></table>

    DOMツリーに追加のレベルがあってはならず、代わりに<td>sは<tr>要素の直接の子であるべきです。

  2. HTMLリスト、特に<dt>/<dd>要素が<dl>の直接の子であるが通常ペアで存在する定義リストでは、同様の問題があります。

  3. display:gridを使用したテーブルのようなデータの配置：

    <div style="display: grid; grid-template-columns: auto auto">
    <ng-container ng-repeat="item in items">
        <div>{{ item.a }}</div>
        <div>{{ item.b }}</div>
    </ng-container>
</div>

    DOMツリーに存在するコンテナ要素は、子ではなくセルとしてレンダリングされるため、レイアウト全体が破損するため、この場合はさらに問題になります。

angularjsangularangularjs-directive
14
mvermand

あなたが言及した場合には、それぞれng-repeat-startとng-repeat-endのペアを使用できます：

  1. セルのインターレースペア、トリプルなどのテーブル：

    <table><tr>
  <td ng-repeat-start="item in items">{{ item.a }}</td>
  <td ng-repeat-end>{{ item.b }}</td>
</tr></table>

  2. HTMLリスト：

    <dl>
  <dt ng-repeat-start="item in items">{{ item.term }}</dt>
  <dd ng-repeat-end>{{ item.definition }}</dd>
</dl>

  3. Display：gridを使用したテーブルのようなデータの配置：

    <div style="display: grid; grid-template-columns: auto auto">
  <div ng-repeat-start="item in items">{{ item.a }}</div>
  <div>{{ item.b }}</div>
  <div ng-repeat-end>{{ item.c }}</div>
</div>

これについては、APIリファレンスで読むことができます。 https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

13
Paweł Żurowski

Angularjsとng-containerの両方で同じ Angular-2 を使用することもできます。ただし、angular-2には ng-template という追加オプションがあり、これは ng-container として機能します

2
Ramesh Rajendran

残念ながら、AngularJSでは、マークアップに存在するHTML要素でng-repeat、ng-ifなどを使用する必要があります。正確なユースケースによっては、replace: trueで要素ディレクティブを使用してみることができます。

1
ach