ng-repeat в строки без использования boostrap

Я снова обращаюсь к StackOverflow за помощью в этом вопросе. Я полностью знаю, как это сделать с помощью Bootstrap, однако я бы хотел сделать это только с помощью Ionic, если это возможно (не смог найти что-либо, фокусируясь только на этом).ng-repeat в строки без использования boostrap

Задача: Я хотел бы использовать ng-repeat для разделения создать новую строку, если массив имеет более 3 записей.

Пример кода (с попыткой):

<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-х дисплеев. Я подозреваю, что мне нужно перевернуть класс строк, но я не уверен, как лучше подойти к этому.

Любые предложения приветствуются.

источник

2016-11-11 Dan

Я использовал float слева для блоков, и я просто добавил ng-стиль с условием div, который имеет ng-repeat. Он работает так, как вы ожидали. Вы можете обратиться ниже plunkr enter link description here

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]*" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script> 
 
    <link data-require="[email protected]*" 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="[email protected]*" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
 
    
 
    <script data-require="[email protected]" 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>

источник

2016-11-11 12:42:28

Не уверен, но я думаю, вы хотели бы разделить свой массив параметров на строки, каждый из которых содержит 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)) 
    } 

}

Короче подход заключается в массив и раскол это в двумерный массив, первое измерение содержит все строки, во вторых столбцы.

Помните, что каждый раз, когда вы изменяете массив данных, вам нужно снова вызвать функцию разделения, чтобы применить изменения к вашему разделенному массиву.

Надеюсь, это поможет! ;)

источник

2016-11-11 12:40:26 OClyde

ng-repeat в строки без использования boostrap

ответ

Смежные вопросы