ng-repeat 成行而不使用引导程序答案

【问题标题】：ng-repeat into rows without using boostrapng-repeat 成行而不使用引导程序
【发布时间】：2017-03-25 15:29:41
【问题描述】：

我再次向 StackOverflow 寻求帮助。我完全知道如何使用 Bootstrap 来做到这一点，但是如果可能的话，我想只使用 Ionic 来做到这一点（无法找到任何专注于此的东西）。

问题：如果数组有超过 3 个条目，我想使用 ng-repeat 来划分创建一个新行。

代码示例（有尝试）：

<div class="row">
    <div ng-repeat="data in datas">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col">
            <ul name="{{data.name}}">
                <li>
                    <img class="drinks-placeholder" data-ng-src="img/{{data.image}}">
                </li>
                <li>{{data.option1}} - {{data.option2}} </li>
                <li>{{data.detail}}</li>
            </ul>
        </div>
    </div>
</div>

这会导致内容按行排列，并且不会在 3 次显示后拆分。我怀疑我需要翻转行类，但我不确定解决这个问题的最佳方法。

非常欢迎任何建议。

【问题讨论】：

标签： javascript ionic-framework angularjs-ng-repeat

【解决方案1】：

也不确定，但我想您想将选项数组拆分为行，每行包含 3 列 - 我说的对吗？

我在这里准备了一个小操场示例，看看： http://play.ionic.io/app/d67b4f541216

核心思想是splitDatas函数：

/**
 * Split the datas array into cols and rows
 */
$scope.splitDatas = function( columns ){

    var toSplit = angular.copy($scope.datas);
    $scope.splittedDatas = [];

    if ( columns === undefined )
      columns = 3;

    while ( toSplit.length > 0 ) {
      $scope.splittedDatas.push( toSplit.splice(0, 3) )
    }

}

简而言之，方法是将数组拆分为一个二维数组，第一个维度包含所有行，第二个维度包含列。

请记住，每次修改数据数组时，都必须再次调用拆分函数，以便将更改也应用到拆分后的数组。

希望这会有所帮助！ ;)

【讨论】：

【解决方案2】：

我在块中使用了左浮动，我只是将带有条件的 ng-style 添加到具有 ng-repeat 的 div 中。它正在按您的预期工作。可以参考下方plunkrenter link description here

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="bootstrap@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
    <script data-require="bootstrap@*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
    
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    
  </head>

  <body ng-app="myApp">
    <h1>Hello Plunker!</h1>
    <div class="row" ng-controller="MyController">
      <div ng-repeat="data in datas" ng-style="$index % 3 === 0 ? {'float': 'left', 'clear': 'both'} : {'float': 'left'}">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col">
          <ul name="{{data.name}}">
            <li>
              <img class="drinks-placeholder" data-ng-src="img/{{data.image}}" />
            </li>
            <li>{{data.option1}} - {{data.option2}} </li>
            <li>{{data.detail}}</li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      var module = angular.module("myApp", []);
      module.controller("MyController", ['$scope', function(scope){
        scope.datas = [
          {name: 'dog', image: '', option1: '1', option2: '2', detail: 'It is a dog'},
          {name: 'dog', image: '', option1: '1', option2: '2', detail: 'It is a dog'},
          {name: 'dog', image: '', option1: '1', option2: '2', detail: 'It is a dog'},
          {name: 'dog', image: '', option1: '1', option2: '2', detail: 'It is a dog'},
          {name: 'dog', image: '', option1: '1', option2: '2', detail: 'It is a dog'},
          {name: 'dog', image: '', option1: '1', option2: '2', detail: 'It is a dog'},
          {name: 'dog', image: '', option1: '1', option2: '2', detail: 'It is a dog'},
          {name: 'dog', image: '', option1: '1', option2: '2', detail: 'It is a dog'}
        ];
      }]);
      
    </script>
  </body>
  
  

</html>

【讨论】：