Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"}
  ];
}
like image 762
Barlas Apaydin Avatar asked Mar 06 '15 13:03

Barlas Apaydin


1 Answers

There is even a cleaner and simpler solution, but you must use angular 1.2.1: https://jsfiddle.net/1fch1221/6/

<div ng-controller="Ctrl">
<div class="left">
  <div ng-repeat="item in data" ng-if="$index < (data.length / 2)">{{item.value}}</div>
</div>
<div class="right">
  <div ng-repeat="item in data" ng-if="$index >= (data.length / 2)">{{item.value}}</div>
</div>

like image 102
Michelangelo Avatar answered Oct 19 '22 10:10

Michelangelo