Bir ng tekrarı tarafından oluşturulan elemanları bazı sütunlara taşımaya çalışıyorum. Bir yönergeyle başarılı bir şekilde yaptım, ancak ng-repeat'ın çalıştığı nesneler dizisini sıralıyorum. En küçük sütunu arayan ve sonra öğeyi içine yerleştiren yönerge, en küçük sütunu belirlemede başarısız olur (belki de sütunlarda hala elemanlar olduğu için). Kullandığım yapının (yönergeler/denetleyiciler vb.) En uygun olmadığını ve istediğim davranışı elde etmek için açısal kodun nasıl düzenleneceğini bulamıyorum.ng-repeat tarafından oluşturulan angularJS öğelerini taşıma
Şu an elimde olanı gösteren bir jsFiddle var: http://jsfiddle.net/kytXy/6/ Öğelerin sütunların içine doğru şekilde yerleştirildiğini görebilirsiniz. Sıralamayı yeniden düzenleyen bir düğmeyi tıklarsanız, tekrar eklenmezler. Aynı tuş üzerinde birden çok kez tıklarsanız, ne olduğunu izleyin ... Öğelerin nasıl eklendiğini ve neyin yanlış olduğunu görebilmeniz için yorumlayabileceğiniz uyarılar ekleyebilirim. Ayrıca herhangi bir başarı olmadan tekrar eklemeden önce sütunları boşaltmayı denedim (jsfiddle'a yorum yaptı). HTML:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div ng-app="myModule">
<div ng-controller="Ctrl" >
<button ng-click="predicate = 'id'; reverse=false; setupColumns()">Sort ID</button>
<button ng-click="predicate = 'id'; reverse=true; setupColumns()">Sort ID reversed</button>
<div id="columns" generate-sub-columns post-render>
</div>
<div class="elements">
Elements are stored here !
<div class="element" ng-repeat="(key,elt) in elts | orderBy:predicate:reverse" id="element{{key}}">
Text: {{elt.a}}
</div>
</div>
</div>
</div>
JS:
var myModule = angular.module('myModule', []);
myModule.controller('Ctrl', function($scope) {
$scope.predicate='id';
$scope.reverse=false;
$scope.elts = [
{id:0,a:"Hi man !"},
{id:1,a:"This is some text"},
{id:2,a:"Wanted to say hello."},
{id:3,a:"Hello World!"},
{id:4,a:"I love potatoes :)"},
{id:5,a:"Don't know what to say now. Maybe I'll just put some long text"},
{id:6,a:"Example"},
{id:7,a:"Example2"},
{id:8,a:"Example3"},
{id:9,a:"Example4"},
{id:10,a:"Example5"},
{id:11,a:"Example6"}
];
$scope.setupColumns = function() {
console.log('calling setupColumns');
var eltIndex = 0;
var element = jQuery("#element0");
/*while(element.length > 0) {
jQuery('#elements').append(element);
eltIndex++;
element = jQuery("#element"+eltIndex);
alert(1);
}
alert('Columns should be empty');*/
element = jQuery("#element0");
eltIndex = 0;
var columnCount = 0;
while (jQuery("#column"+columnCount).size() >0)
columnCount++;
while(element.length > 0) {
console.log('placing new element');
var smallestColumn = 0;
var smallestSize = jQuery("#columns").height();
for (var i = 0; i < columnCount; i++) {
var columnSize = jQuery(".column#column"+i).height();
if (columnSize < smallestSize) {
smallestColumn = i;
smallestSize = columnSize;
}
};
jQuery('.column#column'+smallestColumn).append(element);
eltIndex++;
element = jQuery("#element"+eltIndex);
//alert(1);
}
//alert('Columns should be filled');
};
});
myModule.directive('generateSubColumns', function() {
return {
restrict: 'A',
controller: function() {
var availableWidth = jQuery("#columns").width();
var sizePerColumn = 100;
var nbColumns = Math.floor(availableWidth/sizePerColumn);
if (nbColumns<=1)
nbColumns=1;
for (var i = 0; i < nbColumns; i++) {
jQuery('<div class="column" id="column'+i+'">Column '+i+'</div>').appendTo('#columns');
};
}
};
});
myModule.directive('postRender', [ '$timeout', function($timeout) {
var def = {
restrict: 'A',
terminal: true,
transclude: true,
link: function(scope, element, attrs) {
$timeout(scope.setupColumns, 0);
}
};
return def;
}]);
ve bazı css:
#columns {
width: 100%;
}
.column {
width: 100px;
display:inline-block;
vertical-align: top;
border: 1px solid black;
}
.element {
border: 1px solid red;
}