当列数为 4 时，我如何务实地让 ng-repeat 添加另一行 - How can I pragmatically let ng-repeat add another row when the number of columns are 4?

嗨，我需要有人帮助我，ng-repeat正在从json文件中获取数据，它显示在引导行类的div中，该类内部有col-sm-3，我需要让ng-repeat在一行内有每个4个"col-sm-3"，而不是仅在行内呈现所有8个col-sm-3，因为这会导致设计错误

var angular;
angular.module("rootCave", ['ngRoute'])
    .service('aboutService', function ($http, $q) {
        "use strict";
        var deferred = $q.defer();
        $http.get('data/data.json').then(function (rcdata) {
            deferred.resolve(rcdata);
        });
        this.getAbout = function () {
            return deferred.promise;
        };
    })
    .controller('aboutCtrl', function ($scope, aboutService) {
        var promise = aboutService.getAbout();
        promise.then(function (rcdata) {
            $scope.about = rcdata.data.about;
            $scope.products = rcdata.data.products;
            $scope.mobileProduct = rcdata.data.mobileProduct;
            $scope.clients = rcdata.data.clients;
            $scope.anytime = rcdata.data.anytime;
            $scope.lobProduct = rcdata.data.lobProduct;
            $scope.Product = rcdata.data.lobProduct.projectsdetails;
        });
    })
    .config(function ($routeProvider) {
        $routeProvider
            .when('/lob',
                {
                    controller: 'loburl',
                    templateUrl: 'line-of-business.php'
                });
    });

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="row">
                <div class="col-sm-3 " data-ng-repeat="items in about">
                    <div class="about-box">
                        <img ng-src= "<?php echo $img_about; ?>{{items.icon}}"> 
                        <h3>{{items.title}}</h3>
                        <p>{{items.description}}</p>
                    </div>
                </div>
            </div>

你可以试试可能会对你有所帮助

<div class="row" ng-repeat="items in about track by $index" ng-if="$index % 4 == 0">
  <div class="col-sm-3" 
       ng-repeat="i in [$index, $index + 1, $index + 2, $index + 3]" 
       ng-if="about[i]"
      >
      <div class="about-box">
           <img ng-src= "<?php echo $img_about; ?>{{about[i].icon}}"> 
           <h3>{{about[i].title}}</h3>
           <p>{{about[i].description}}</p>
      </div>
  </div>
</div>

看看这个 plunk： https://plnkr.co/edit/r5tXZAWFxTEAKHjqyRvY?p=preview

您可以嵌套两个 ng 重复，外部迭代行，内部显示元素：

<div ng-repeat="i in getRows(rowCount) track by $index" class="row">
  <b>Row {{$index}}</b>
  <div class="col-sm-3" ng-repeat="item in getRowItems($index)">
   {{item}}
  </div>
</div>

在控制器中：

$scope.items = ['a','b','c','d','e','f','g','h','i'];
//determine the number of rows
$scope.rowCount = Math.ceil($scope.items.length/4);
$scope.getRows = function(rows) {
    return new Array(rows);   
}
//the following function gives four items for one row index
$scope.getRowItems = function(row) {
  return $scope.items.slice(row*4, (row+1)*4);
}

它类似于分页。getRows 函数的灵感来自以下：ng-重复定义的次数而不是在数组上重复的方法？

也许地图不像我希望的那样工作。但是，呈现逻辑建议你有一个列表列表。

function group(array, size)  {
    var length = array.length;
    var result = Array(Math.ceil(length, size));
    var index = 0, resIndex = 0;
    while(index < length){
        result[resIndex++] = array.slice(index, (index += size));
    }
    return result;
}

使用控制器中的帮助程序功能

.controller('aboutCtrl', function ($scope, aboutService) {
        var promise = aboutService.getAbout();
        promise.then(function (rcdata) {
            $scope.about = group(rcdata.data.about, 4);
        });
    });

然后渲染逻辑变为：

<div class="row" ng-repeat="rows in about">
  <div class="col-sm-3 " ng-repeat="column in rows">
    <div class="about-box">
    </div>
  </div>
</div>