2013-07-09 12 views
5

Sto lavorando a un'app AngularJS che crea un foglio di calcolo da un array 2D creato dalla funzione ng-repeat. Sto attualmente scrivendo una funzione che cambierà i valori iniziali dell'array quando l'utente immetterà nuovi valori nel foglio di calcolo. Ciò mi richiede di accedere al punto nell'array iniziale in base all'indice di riga e all'indice della colonna, così posso cambiarlo con il nuovo valore.

Ho esaminato lo ng-repeat API e ho scoperto che ha una proprietà $index che mi consente di controllare l'indice del valore ripetuto corrente. Tuttavia, mi sto trovando che sarà solo fammi controllare l'indice del valore di qualsiasi ciclo di ripetizione si è dentro -. Nessun altro loop esterne che si può anche essere in

<script> 

    data = [ 
      [A1, B1, C1], 
      [A2, B2, C2], 
      [A3, B3, C3] 
      ] 

    sheet= function($scope, $parse){ 
    $scope.columns = [colA, colB, colC]; 
    $scope.rows = data.length; 
    $scope.cells = {}; 
    $scope.outer = data.map(function(c,row){ 
     return c.map(function(data, ind){ 
      return { 
       content: data, 
       model: null, 
      }; 
     }); 
    }); 
    }; 
</script> 


<div ng-app ng-controller="sheet"> 
    <table> 
     <tr class="column-label"> 
      <td ng-repeat="column in columns">{{column}}</td> 
     <tr ng-repeat="inner in outer"> 
      <td class="row-label" ng-repeat="data in inner"> 
       <div> 
        <input type="text" ng-model="data.content" value="{{data.content}}"> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div> 

voglio accedere al $index di outer mentre si è all'interno del ciclo inner e si può anche accedere allo $index dello inner. C'è un modo per farlo? Ho intenzione di passare questi valori come parametri alla funzione che sto scrivendo.

+0

Forse c'è una risposta più diretta, ma vorrei pro solo s verificando ng-repeat, forse puoi semplicemente scrivere la tua direttiva che gestisce specificamente questo caso per te. Una buona domanda però. – shaunhusain

+2

'$ parent. $ Index' o forse' $ parent(). $ Index' - Uno di questi due dovrebbe funzionare. – rGil

+0

'$ parent. $ Index' funziona. Grazie! – user2494584

risposta

10

Haha, beh, è ​​stato risposto nei commenti, mentre stavo mettendo insieme il mio violino, ma ecco una dimostrazione di esso per le persone che trovano questa domanda lungo la strada:

http://jsfiddle.net/V8qzt/1/

<div ng-controller="MyCtrl"> 
    <table> 
     <tr ng-repeat="row in data"> 
     <td ng-repeat="cell in row"> 
      {{cell}} ({{$index}},{{$parent.$index}}) 
      </td> 
     </tr> 
    </table> 
</div> 
+0

Ricevo che "I duplicati in un ripetitore non sono consentiti" –

+1

risolto con l'aggiunta di "traccia per $ indice" (http://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in- un ripetitore-sono-non-permesso) –

0

Qui è il mio codice, forse aiuterà te o qualcuno che trova il modo di mettere in loop array 2D in due elementi ng-repeat. codice

codice HTML
<div ng-repeat="row in gameMatrix track by $index"> 
    <div id=cell_{{row.id}}> 
    </div> 
</div> 

Javascript:

$scope.gameData = [ 
    [1, 0, 0], 
    [1, 0, 0], 
    [1, 0, 0], 
    [1, 0, 0] 
]; 

$scope.presentCellsData = function() { 
    var Str = ""; 
    var rows = []; 
    var term = []; 
    for (i = 0; i < $scope.gameData.length; i++) { 
     Str = ""; 
     rows = ""; 
     for (j = 0; j < $scope.gameData[i].length; j++) { 
      console.log("i j " + i + " " + j); 
      console.log($scope.gameData[i][j]); 
      Str = "<div style='display:inline-block'> " + $scope.gameData[i][j] + "&nbsp;</div>"; 
      rows += Str; 
     } 
     rows += "</br>"; 
     term.push({ "id": i, "data": rows }); 
    } 
    console.log(term); 
    return term; 
} 

$scope.gameMatrix = $scope.presentCellsData(); 
angular.element(document).ready(function() { 
    for (i = 0; i < $scope.gameMatrix.length; i++) { 
     console.log("$scope.gameMatrix[i]"); 
     console.log($scope.gameMatrix[i]); 
     document.getElementById("cell_" + i).outerHTML = $scope.gameMatrix[i].data; 
    } 
}); 

@Karen: grazie, posso utilizzare il codice in questo modo con il mio dati:

<div style="display: inline-block;" ng-repeat="row in gameData track by $index"> 
     <!-- <div id=cell_{{row.id}}> 
      aaa 
     </div> --> 
     <div ng-repeat="cell in row track by $index"> 
      {{cell}} 
     </div> 
    </div>