angularjs - for - ng-template angular 2

pasando 2 $ valores de índice dentro de ng-repetir anidados

Question

Así que tengo una repetición ng anidada dentro de otra repetición ng para construir un menú de navegación. En cada <li> en el ciclo interno de repetición ng, establezco un clic de ng que llama al controlador relevante para ese elemento del menú pasando el índice $ para que la aplicación sepa cuál necesitamos. Sin embargo, también necesito pasar el índice de $ desde la repetición externa ng para que la aplicación sepa en qué sección estamos y qué tutorial.

<ul ng-repeat="section in sections">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($index)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

Aquí hay un Plunker http://plnkr.co/edit/bJUhI9oGEQIql9tahIJN?p=preview

Answer 1

¿Qué pasa con el uso de esta sintaxis? Acabo de descubrir esto y es bastante impresionante.

ng-repeat="(key,value) in data"

Ejemplo:

<div ng-repeat="(indexX,object) in data">
    <div ng-repeat="(indexY,value) in object">
       {{indexX}} - {{indexY}} - {{value}}
    </div>
</div>

Con esta sintaxis puede dar su propio nombre a $index y diferenciar los dos índices.

Answer 2

Cada repetición ng crea un ámbito secundario con los datos pasados ​​y también agrega una variable $index adicional en ese ámbito.

Entonces, lo que debe hacer es alcanzar el alcance principal y usar ese $index .

Ver http://plnkr.co/edit/FvVhirpoOF8TYnIVygE6?p=preview

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu($parent.$index)" ng-repeat="tutorial in section.tutorials">
    {{tutorial.name}}
</li>

Answer 3

Cuando estás tratando con objetos, quieres ignorar los ID simples tanto como sea conveniente.

Si cambia la línea de clic a esto, creo que estará bien encaminado:

<li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(tutorial)" ng-repeat="tutorial in section.tutorials">

Además, creo que es posible que necesite cambiar

class="tutorial_title {{tutorial.active}}"

a algo como

ng-class="tutorial_title {{tutorial.active}}"

Consulte http://docs.angularjs.org/misc/faq y busque ng-class.

Answer 4

Estoy tratando de usar la solución que me propuso gonzalon. Pero no funciona en mi caso. Quiero tener una información sobre herramientas con más información cuando el mouse esté sobre la celda de la tabla que creo creando un bucle a las filas y celdas.

Los valores cambian cuando muevo mi mouse sobre las celdas de la tabla, pero los valores de fila y columna son siempre el número de columna.

<div table-data="vm.tableData" ng-if= "vm.table_ready" >

     <b2b-table>
     <table>
         <thead type="header">
             <tr>
                <th ng-repeat = "zone in vm.tableData[0]" >{{zone}}</th>

             </tr>
         </thead>

         <tbody type="body" ng-repeat="row in vm.tableData track by $index" ng-init="rowIndex = $index" ng-if="$index >0" >
             <tr>
               <th>{{row[0]}}</th>
               <td headers="rowheader0" ng-repeat = "cell in row  track by $index" ng-init="columnIndex = $index" ng-if="$index >0"  ng-mouseover="vm.showTooltip(rowIndex, columnIndex)" ng-mouseleave="vm.hideTooltip()" >
                {{cell[1]}}

               </td>
             </tr>
         </tbody>

     </table>
      </b2b-table>

 </div>

Answer 5

Solo para ayudar a alguien que llegue aquí ... No debe usar $ parent. $ Index ya que no es realmente seguro. Si agrega un ng-if dentro del bucle, obtiene el $ index desordenado!

Manera correcta

  <table>
    <tr ng-repeat="row in rows track by $index" ng-init="rowIndex = $index">
        <td ng-repeat="column in columns track by $index" ng-init="columnIndex = $index">

          <b ng-if="rowIndex == columnIndex">[{{rowIndex}} - {{columnIndex}}]</b>
          <small ng-if="rowIndex != columnIndex">[{{rowIndex}} - {{columnIndex}}]</small>

        </td>
    </tr>
  </table>

Compruebe: plnkr.co/52oIhLfeXXI9ZAynTuAJ

Answer 6

Una solución mucho más elegante que $parent.$index está usando ng-init :

<ul ng-repeat="section in sections" ng-init="sectionIndex = $index">
    <li  class="section_title {{section.active}}" >
        {{section.name}}
    </li>
    <ul>
        <li class="tutorial_title {{tutorial.active}}" ng-click="loadFromMenu(sectionIndex)" ng-repeat="tutorial in section.tutorials">
            {{tutorial.name}}
        </li>
    </ul>
</ul>

Plunker: http://plnkr.co/edit/knwGEnOsAWLhLieKVItS?p=info