2013-07-09 5 views
5

Tôi đang làm việc trên một ứng dụng AngularJS xây dựng một bảng tính ra khỏi một mảng 2D được xây dựng bởi hàm ng-repeat. Tôi hiện đang viết một hàm sẽ thay đổi giá trị ban đầu của mảng khi người dùng nhập các giá trị mới trên bảng tính. Điều này yêu cầu tôi truy cập vào điểm trong mảng ban đầu dựa trên chỉ mục hàng và chỉ mục cột của nó để tôi có thể thay đổi nó thành giá trị mới.

Tôi đã xem qua số ng-repeat API và thấy rằng nó có thuộc tính $index cho phép tôi kiểm tra chỉ mục giá trị lặp lại hiện tại. Tuy nhiên, tôi thấy rằng nó sẽ chỉ cho tôi kiểm tra các chỉ số của các giá trị của bất cứ vòng lặp lặp lại bạn đang ở trong -. Không có vòng bên ngoài khác mà bạn cũng có thể trong

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

tôi muốn truy cập các $index của outer trong khi nằm trong vòng lặp inner và cũng có thể truy cập vào số $index của số inner. Có cách nào để thực hiện việc này không? Tôi có kế hoạch chuyển các giá trị này làm tham số cho hàm tôi đang viết.

+0

Có lẽ có một câu trả lời thẳng thắn hơn, nhưng tôi sẽ chỉ có thể tart kiểm tra ra ng-lặp lại, có lẽ bạn chỉ có thể viết chỉ thị của riêng bạn mà cụ thể xử lý trường hợp này cho bạn. Một câu hỏi hay. – shaunhusain

+2

'$ parent. $ Index' hoặc có thể' $ parent(). $ Index' - Một trong hai thứ này sẽ hoạt động. – rGil

+0

'$ parent. $ Index' hoạt động. Cảm ơn! – user2494584

Trả lời

10

Haha, tốt, nó đã được trả lời trong các ý kiến ​​trong khi tôi đang đặt lại với nhau fiddle của tôi, nhưng đây là một cuộc biểu tình của nó cho những người tìm kiếm câu hỏi này xuống đường:

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

Tôi nhận được 'Bản sao trong bộ lặp không được phép' –

+1

giải quyết nó bằng cách thêm 'theo dõi bởi chỉ số $' (http://stackoverflow.com/questions/16296670/angular-ng-repeat-error-duplicates-in- a-repeater-are-not-allowed) –

0

đây là mã của tôi, có lẽ nó sẽ giúp bạn hoặc ai đó tìm cách để lặp mảng 2D thành hai phần tử ng-repeat. HTML code

đang
<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: cảm ơn bạn, tôi có thể sử dụng mã của bạn theo cách đó với dữ liệu của tôi:

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