Angular在垂直字母列中列出我的对象

时间:2017-11-11 19:06:19

标签: javascript angularjs twitter-bootstrap-3

我已经看到了几个例子,但我无法将其应用到我正在做的事情上。我知道它必须是我想念的傻事。

我的报告对象按照描述

进行排序

报告{"描述" }

mymean <- function(cleaned_us){
  column_total = sum(cleaned_us)
  column_length = length(cleaned_us)
  return (column_total/column_length)
}

Average_2 <- apply(numeric_clean_usnews,2,mymean,na.rm=T)

我想要

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

我尝试过分块数据以及我在这里看到的其他几种方法,并得到了各种结果。每隔5行用上面的代码重新开始,但是我的订单是横向的(水平),但我需要按字母顺序排列4列(垂直)....

它肯定不会像我一样努力......

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

您可以使用以下代码订购报告

$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;
    }
}

订购数据后,ng-repeat将以您希望的方式显示报告。

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