2017-11-11 19 views
0

我已經看到了一些例子,但我無法得到它適用於我正在做的事情。我知道它一定是我失蹤的東西。Angular在垂直的字母列中列出我的對象

我的報告的目的是通過描述排序這樣

報告{ 「說明」}

a,b,c,d 
e,f,g,h 

我想

a,d,g,j 
b,e,h,k 
c,f,i,l 

<div class="row"> 
<div data-ng-repeat="report in reports | orderBy:['description']" > 
     <div class="col-xs-3"> {{report.description}}</div> 
</div> 
... 

我已經試過分塊中的數據和其他的幾種方法我在這裏看到了,我得到了一些結果。每隔第5行重新開始上面的代碼,但我的訂單是橫向(水平),但我需要在4列按字母順序向下(垂直)...

它肯定不能像我一樣努力它...

回答

0

您是否在尋找下面的邏輯?

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
</head> 
<body> 
    <div ng-app="app" ng-controller="ctrl"> 
     {{convertedData}} 
    </div> 
    <script src="../lib/angular.js"></script> 
    <script> 
     var app = angular.module('app', []); 
     app.controller('ctrl', function ($scope) { 
      $scope.data = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']; 
      $scope.convertedData = {}; 
      var length = $scope.data.length; 
      var rows = length/3; 
      for (var j = 0; j < rows; j++) 
      { 
       $scope.convertedData[j] = []; 
      } 
      for(var i=0;i<length;i++) 
      { 
       $scope.convertedData[i%3].push($scope.data[i]); 
      } 
     }); 

    </script> 
</body> 
</html> 
0

您可以使用下面的代碼訂貨數據NG重複會顯示您的報告想要的方式後,爲了您的報告

$scope.reports = [{ description: 'a' }, { description: 'b' }, { description: 'c' }, { description: 'd' }, { description: 'e' }, { description: 'f' }, { description: 'g' }, { description: 'h' }, { description: 'i' }, { description: 'j' }, { description: 'k' }, { description: 'l' }]; 
$scope.orderedReports = []; 

var j = 0; 
var i = j; 
while ($scope.reports.length > $scope.orderedReports.length) { 
    $scope.orderedReports.push($scope.reports[i]); 
    i = i + 3; 
    if (i + 1 > $scope.reports.length) { 
     j = j + 1; 
     i = j; 
    } 
} 

<div data-ng-repeat="report in reports" > 
     <div class="col-xs-3"> 
      {{report.description}} 
     </div> 
</div>