Question

我再次向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次显示后不分割。我怀疑我需要翻转行类，但我不确定最好的方法来解决这个问题。

任何建议都非常欢迎。

Answer 1

我使用浮动左边的块，我只是添加了ng-style条件到具有ng-repeat的div。它按预期工作。您可以在下面参考plunkr enter 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>

Answer 2

也不确定，但我想您想将您的选项数组拆分成行，每行包含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) )
    }

}

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

请记住，每次修改数据阵列时，都必须再次调用split函数，以便将更改应用于分割数组。

希望这有帮助！ ;）

ng-repeat成行而不使用boostrap

2 个答案: