web-dev-qa-db-fra.com

AngularJS équivalent pour Angular ng-container

Existe-t-il un équivalent de AngularJS pour Angular ng-container ?

Ou devrais-je créer moi-même quelque chose avec une directive transclude?

Exemple de cas d'utilisation:

  1. Tables à paires entrelacées, triples, etc. de cellules:

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

    Il ne devrait pas y avoir de niveau supplémentaire dans l'arborescence DOM, et <td>s devrait plutôt être des enfants directs de l'élément <tr>.

  2. Il existe un problème similaire avec les listes HTML, en particulier la liste de définitions où les éléments <dt>/<dd> doivent être des enfants directs de <dl> alors qu'ils existent généralement par paires.

  3. Disposition des données sous forme de tableau avec 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>

    Ce cas est d'autant plus problématique que l'élément conteneur existant dans l'arborescence DOM provoque la rupture de l'ensemble de la présentation, car il est rendu sous la forme d'une cellule plutôt que de ses enfants.

angularjsangularangularjs-directive
9
mvermand

Dans les cas que vous avez mentionnés, vous pouvez utiliser les paires ng-repeat-start et ng-repeat-end, respectivement:

  1. Tables à paires entrelacées, triples, etc. de cellules:

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

  2. Listes HTML:

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

  3. Disposition des données sous forme de tableau avec affichage: grille:

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

Vous pouvez en savoir plus à ce sujet dans la référence API: https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points

8
Paweł Żurowski

Malheureusement, dans AngularJS, ng-repeat, ng-if, etc. doivent être utilisés sur un élément HTML qui sera présent dans le balisage. En fonction du cas d'utilisation exact, vous pouvez essayer d'utiliser une directive element avec replace: true.

1
ach

Vous pouvez également utiliser le même ng-container dans Angularjs et Angular-2. Mais dans angular-2 avoir une option supplémentaire est ng-template qui agit comme ng-container

1
Ramesh Rajendran