当列数为4时，我如何才能实际地让ng-repeat添加另一行呢？

Question

​

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>

​

Answer 1

你可以试试，也许会对你有帮助。

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

Answer 2

看看这个笨蛋：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函数的灵感来自于此：Way to ng-repeat defined number of times instead of repeating over array?

Answer 3

也许map并没有像我希望的那样工作。但是，呈现逻辑表明您有一个列表列表。

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

使用控制器中的helper函数

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