ng-repeat索引到數組

我有一個angularjs應用程序通過ajax傳輸數據，我想ng-repeat數據。我有數據流和顯示，但現在我想templatize對象。我遇到的問題是我正在使用ng-repeat來簡單地索引到控制器中的數組中。我現在需要有一個ng-repeat索引到數組

<div class="row" data-ng-repeat="row in rows"> 
     <div class="span3" data-ng-repeat="col in cols"> 
      //displays the raw json fine 
      {{ data[$parent.$index * numColumns + $index] }}       
      // also displays the raw json 
      {{ item = data[$parent.$index * numColumns + $index] }}       
      <div>Id: {{item.Id}} </div> 
      <div>Title: {{ item.ClientJobTitle }}</div> 
      ... 
     </div> 
    </div>

我總是重複數組索引表達式爲每個屬性，但也會有幾十個屬性，因此該代碼將是醜陋的，所有的重複計算會慢下來。

什麼是正確的（角）方式來做到這一點？

更新我也需要它響應，我將根據窗口寬度動態調整列數。

更新我想我真正想要的是類似下面的非工作示例

 <div class="row" data-ng-repeat="row in rows"> 
     <div class="span3" data-ng-repeat="col in cols"> 
      <div ng-model="data[$parent.$index * numColumns + $index]"> 
       <!-- Here $model would refer to the ng-model above --> 
       <div>Id: {{$model.Id}} </div> 
       <div>Title: {{ $model.Title }}</div> 
       ... 
      </div> 
     </div> 
    </div>

來源

2013-04-05 µBio

你能告訴我們初始數據的樣子嗎？無法直觀顯示'item'與'rows'有關。也許拼湊一塊？ – jszobody 2013-04-05 16:00:30

@jszobody http://plnkr.co/edit/Bd5tYa7IxMb0ALtUigrz?p=preview – 2013-04-05 16:28:18

您可以創建一個帶有transclud的指令，該指令將採用列表，行和列，並使transclud部分的範圍內的項目。我知道淘汰賽有與類似的聲明，但我不認爲角度 – 2017-04-24 19:53:06

我認爲要做到這一點的方式是簡單地通過項目自身循環，溝所有numRows和numColumns。

http://plnkr.co/edit/Qu6X5FnZY3TpgyNjnBXy?p=preview

即輸出正是你在做什麼，有多少簡單代碼angularjs。

看來您正在使用行/列計數來限制您在一行中水平顯示的項目數。我認爲你可以用純CSS來處理這個問題，你可以在我的plunk中看到我限制了父容器的寬度。我手動完成，但是你可以很容易地將一個動態的css類附加到父容器上，並且可以更靈活地控制一行中出現的項目數量。

來源

2013-04-05 16:52:57 jszobody

如果我想要部分固定寬度，但在這種情況下，我需要它的響應（我打算調整列數基於窗口尺寸，還沒有到那個部分）。 – 2013-04-05 17:27:29

CSS可以更容易地調整到窗口尺寸。如果必須創建一些不同的CSS類名稱，請將其應用於ng-class =「getRowClassNams（）」，並將所有寬度邏輯移至該位置。它仍然保持您的循環清潔。 – jszobody 2013-04-05 17:34:34

是的，css使它很容易...它已經在我的情況下（在代碼中的行和span3類）bootstrap處理。我打算按照您的建議調整span3類，但如果我正確理解bootstrap，則需要響應行爲的行類。 – 2013-04-05 18:52:37

你可能處理這個問題的一些方式，但它是值得一提，你不工作的例子是完全可能的，即使沒有指令：

var app = angular.module('app',[]) 
 
app.controller('myCtrl', function($scope) { 
 
\t $scope.numColumns = 2 
 
\t $scope.rows = [1,2,3] 
 
\t $scope.cols = [1,2] 
 
\t $scope.data = [ 
 
\t \t {Id:'abc',Title:'cde'}, 
 
\t \t {Id:'qwe',Title:'rty'}, 
 
\t \t {Id:'asd',Title:'fgh'}, 
 
\t \t {Id:'foo',Title:'bar'}, 
 
\t \t {Id:'uni',Title:'corn'}, 
 
\t \t {Id:'mag',Title:'ic'}, 
 
\t ]; 
 
\t $scope.change1 = function(){ 
 
\t \t \t $scope.numColumns = 2 
 
\t \t $scope.rows = [1,2,3] 
 
\t \t $scope.cols = [1,2] 
 
\t } 
 
\t \t $scope.change2 = function(){ 
 
\t \t \t $scope.numColumns = 3 
 
\t \t $scope.rows = [1,2] 
 
\t \t $scope.cols = [1,2,3] 
 
\t } 
 
});

.span3 { 
 
\t display:inline-block; 
 
\t padding:5px; 
 
\t margin:5px; 
 
\t background: pink; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
<body ng-app="app"> 
 
\t <div ng-controller="myCtrl"> 
 
\t \t <button ng-click="change1()">2x3</button> 
 
\t \t \t \t <button ng-click="change2()">3x2</button> 
 

 
\t <div class="row" data-ng-repeat="row in rows"> 
 
     <div class="span3" data-ng-repeat="col in cols"> 
 
      <div> 
 
\t \t \t \t \t \t \t {{($model = data[$parent.$index * numColumns + $index])?'':''}} 
 

 
       <!-- Here $model would refer to the ng-model above --> 
 
       <div>Id: {{$model.Id}} </div> 
 
       <div>Title: {{ $model.Title }}</div> 
 
       ... 
 
      </div> 
 
     </div> 
 
    </div> 
 
\t </div> 
 
</body>

基本上，這是可能的在飛行中創建「$ model」等變量，內部表達式爲：

{{($model = data[$parent.$index * numColumns + $index])?'':''}}

它不會打印它如果它會響應，在ng-repeat和所有內部工作。不過，這是一種解決方法，指令可能是更好的選擇。

來源

2017-05-26 21:27:57

ng-repeat索引到數組

回答

相關問題