Barlas Apaydin Barlas Apaydin - 2 months ago 11
AngularJS Question

How to divide data to half while using ng-repeat?

I've have some data and i'm able to compile this data to

div
with using
ng-repeat
. I'm trying to divide them to 2 columns and cound't find a way to build it.

Here is my example: ( jsFiddle )

html:

<div ng-controller="Ctrl">
<div class="left">
<div ng-repeat="item in data">{{item.value}}</div>
<!-- i've tried filter and failed -->
</div>
<div class="right">
<div ng-repeat="item in data">{{item.value}}</div>
</div>
</div>


js:

var app = angular.module('app', []);
function Ctrl($scope) {
$scope.data = [
{value: "a"},
{value: "b"},
{value: "c"},
{value: "d"},// trying to divide from here
{value: "e"},// and show the last part in other column
{value: "f"},
{value: "g"},
{value: "h"}
];
}

Answer

You can use two variables, like so

function Ctrl($scope) {
  $scope.data = [
      {value: "a"},
      {value: "b"},
      {value: "c"},
      {value: "d"},// trying to divide from here
      {value: "e"},// and show the last part in other column
      {value: "f"},
      {value: "g"},
      {value: "h"}
  ];

  var len = $scope.data.length,
      mid = len / 2;

  $scope.left  = $scope.data.slice(0, mid);  
  $scope.right = $scope.data.slice(mid, len);
}

Example