Condizionalmente l’aggiunta di elementi in ng-repeat blocco

È possibile aggiungere roba al markup basato sulla condizione?
Come in questo esempio, quando voglio aggiungere td solo alla prima iterazione (solo per il primo elemento della myData)?

<tr ng-repeat="m in myData">
   <td>{{m.Name}}</td>
   <td>{{m.LastName}}</td>

   @if myData.indexOf(m) = 0 then //something like that
   <td rowspan ="{{m.length}}">
      <ul>
        <li ng-repeat="d in days">
           {{d.hours}}
        </li>
      </ul>
   </td> 
</tr>
InformationsquelleAutor iLemming | 2012-11-19

 

2 Replies
  1. 16

    Sì, AngularJS ha 2 direttive per l’occasione:

    • Il ng-show /ng-hide famiglia delle direttive può essere utilizzato per nascondere (da
      con display regole CSS) parti di DOM tre basata su un risultato di
      la valutazione di un’espressione.
    • Se vogliamo togliere /aggiungere parti del DOM in modo condizionale
      la famiglia di ng-switch direttive (ng-switch, ng-switch-quando,
      ng-switch-di default) sarà a portata di mano.

    Alla fine della giornata, entrambe le soluzioni darà lo stesso effetto visivo, ma la sottostante struttura di DOM sarà diverso. Per semplici casi di utilizzo ng-show /ng-hide è probabilmente OK, ma con porzioni più grandi del DOM, devono essere trattati con ng-switch.

    Per il caso di utilizzo da questa domanda vorrei consigli utilizzando ng-switch.

    • Solo per aggiungere. $indice attuale indice dell’elemento, in modo ng-show=”$indice == 0″
    • Come Angolare 1.1.5, è anche possibile utilizzare ng-if="your expression" direttiva. Si aggiunge come un attributo per ogni elemento. Se è valida vero, aggiunge un elemento del dom.
  2. 3

    La soluzione migliore dovrebbe essere:

    <tr ng-repeat="m in myData">
       <td>{{m.Name}}</td>
       <td>{{m.LastName}}</td>
    
       <td ng-if="$first" rowspan="{{myData.length}}">
           <ul>
               <li ng-repeat="d in days">
                   {{d.hours}}
               </li>
           </ul>
       </td> 
    </tr>

Lascia un commento