angularjs - Change ng-repeat end of the screen to other side of the screen -

angularjs - Change ng-repeat end of the screen to other side of the screen -

i have ng-repeat in div data. want output info left side of screen. when reached, moves on right side of screen. height of screen result of how long ng-repeat is. help me this?

left side of right side of screen screen _____________________________ | ng-repeat | data11 | | data1 | . | | . | . | | . | . | | . | . | | . | . | | . | . | | . | . | | . | . | | . | . | | . | . | | . | . | | data10 | data20 | |_______________|_____________|

say if have 20 data's, array length using function .length, 10 in left hand side , 10 in right hand side, in angular js while populating values through ng-repeat, can fill first half within left hand side using limitto shown below

ng-repeat="val in values|limitto:ceil(values.length/2)"

here ceil used in such way if have 23 datas, not perfect half, in such way either left or right should accumulate 1 number, i.e 12 in left , 11 in right

limitto filter in angular js limiting numbers in ng-repeat, syntax given below

{{ limitto_expression | limitto : limit}}

also want utilize ceil function within limitto have inject math scope,

simplest way, can do

$scope.ceil = math.ceil;

in controller. angular way correctly create math service

similarly in right hand side can fill using

ng-repeat="val in values|limitto:-values.length/2"

take @ example

html

working demo

<div ng-app ng-controller="arraycontroller"> <div class="left"> <span ng-repeat="val in values|limitto:ceil(values.length/2)">{{val}} <br/> </span> </div> <div class="right"> <span ng-repeat="val in values|limitto:-values.length/2">{{val}} <br/> </span> </div> </div>

script

angular.module("app", []) .controller('arraycontroller', function ($scope) { $scope.ceil = math.ceil; $scope.values = ['data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data8', 'data9', 'data10', 'data11', 'data12', 'data13', 'data14', 'data15', 'data16', 'data17', 'data18', 'data19', 'data20']; });

angularjs ng-repeat