javascript - 当列数为 4 时，如何务实地让 ng-repeat 添加另一行？

Question

嗨，我需要有人帮助我，ng-repeat 正在从 json 文件获取数据，它显示在 bootstrap row 类的 div 中，其中包含 col-sm-3 ，我需要让 ng -重复将每个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>
       

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>