Блог

У меня есть div, который использует ng-repeat.

Я начинаю с нескольких элементов в массиве.

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

Есть ли способ сделать это?

 <div class='listOne'>
    <div ng-repeat='item in listOne'>{{item}}</div>
</div>
<div class='listTwo'>
    <div ng-repeat='item in listTwo'>{{item}}</div>
</div>
  

JS

 var myList = ['something', 'stuff', 'someOtherthing'];
var listOne = [];
var listTwo = [];

// decide which list to insert into
function decideListBasedOnHeight() { // returns array
    var listOneElement = // reference to listOne element
    var listTwoElement = // reference to listTwo element
    if (listOneElement.offsetHeight > listTwoElement.offsetHeight ) // the height here is zero for both
       return listTwo;
    return listOne;
}

forEach (myList, function(value) {
    decideBasedOnHeight().push(value);
});
  

Пример проблемы:http://plnkr.co/edit/XxJTzNlnQrB7S7tQ0PBL?p=preview
Второй пример:http://plnkr.co/edit/3pzpsgmQ0vIM1e6nuEQG?p=preview

Ммм, хороший вопрос.

Вы не могли бы получить массив, но продвигать его шаг за шагом с помощью директивы. Смотрите

 <div ng-contoller="ctrl">
    <div class='listOne'>
        <div ng-repeat='item in listOne' count-height-and-push-next="listOneHeight">{{item}}</div>
    </div>
    <div class='listTwo'>
        <div ng-repeat='item in listTwo' count-height-and-push-next="listTwoHeight">{{item}}</div>
    </div>
</div>

.directive('countHeightAndPushNext', function(){
   return{
       restrict: 'A',
       scope: true,
       link: function(scope, element, attrs){
           scope[attrs.countHeightAndPushNext]  = element[0].outerHeigth;
           scope.pushItem();
       }
   };

})

.controller('ctrl', function($scope){
    $scope.myList = ['something', 'stuff', 'someOtherthing'];
    $scope.listOne = [];
    $scope.listOneHeight = 0;
    $scope.listTwo = [];
    $scope.listTwoHeight = 0;

    var nextPushIndex = 0;
    $scope.pushItem = function(){
        if($scope.listOneHeight > $scope.listTwoHeight){
             $scope.listTwo.push($scope.myList[nextPushIndex])
        }else{
             $scope.listOne.push($scope.myList[nextPushIndex]);
        }
        nextPushIndex  ;
    };
    $scope.pushItem();
});
  

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