CODEWITHSUNDEEP
javascriptjquerycssangularjsjson
Nitheesh
Nitheesh

Reputation: 19986

Angular JS ng-repeat arranging in vertical split format

I need to maks some modifications in the traditional way of viewing the angular js ng-repeat. I have a JSON data in which there are n number of data (response from server. Length is not fixed). I need to show the data in split format. i.e, the first half number of the response is to be in a div arranged vertically and the second set in an another div placed just next to that.

Like this

enter image description here

But currently what I have got is just as the usual JSON repeat

like this

enter image description here

How can I convert this format Like that I require?

Here is my code snippet.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>
        .container {
            width: 500px;
            border: 1px solid red;
            float: left;
        }
        
        .item {
            width: 50%;
            float: left;
            padding: 5px 0;
        }
        
    </style>
<body ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <div class="item" ng-repeat="data in records">
            {{data.Data}}
        </div>
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.records = [{"Data": "Data1"}, {"Data": "Data2"}, {"Data": "Data3"}, {"Data": "Data4"}, 
                              {"Data": "Data5"}, {"Data": "Data6"}, {"Data": "Data7"}, {"Data": "Data8"}, 
                              {"Data": "Data9"}, {"Data": "Data10"}];
        });
    </script>

</body>

</html>

I wish to achieve this without modifying my JSON data. Thanks in advance.

Upvotes: 3

Views: 1552

Answers (5)

Fissio
Fissio

Reputation: 3758

This works, but I'm not sure how practical it is.

<div style="float:left">
    <div class="numberDiv" ng-repeat="num in data" ng-if="$index < data.length / 2">{{num}}</div>
</div>
<div style="float:left">
    <div class="numberDiv" ng-repeat="num in data" ng-if="$index >= data.length / 2">{{num}}</div>
</div>

Upvotes: 1

machocr
machocr

Reputation: 21

What about css display: grid?

angular.module('test', []).controller('testCtrl', function($scope) {
  $scope.data = [1, 2, 3, 4, 5, 6, 7,8,9,10, 11, 12, 13, 14, 15, 16, 17, 18, 19 ,20,21,22,23,24,25,26,27,28,29,30]
})
.wrapper {
display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 60px 60px 60px 60px 60px;
  grid-auto-flow: column;
}


.item {
  padding:10px;
  margin: 5px;
  border: 1px solid;
}
<!DOCTYPE html>
<html>

<head>
  <script data-require="[email protected]" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="test" ng-controller="testCtrl">
  <div class="wrapper">
    <div class="item" style="width:30px;" class="numberDiv" ng-repeat="num in data" ng-if="$index < data.length">{{num}}</div>
  </div>
</body>

</html>

Upvotes: 0

iamalismith
iamalismith

Reputation: 1571

If you only supporting modern browsers you can do this with CSS using flexbox. 

 var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.records = [{"Data": "Data1"}, {"Data": "Data2"}, {"Data": "Data3"}, {"Data": "Data4"}, 
                              {"Data": "Data5"}, {"Data": "Data6"}, {"Data": "Data7"}, {"Data": "Data8"}, 
                              {"Data": "Data9"}, {"Data": "Data10"}];
        });
.container {
  width: 300px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  height: 10em;
  border: 1px solid;
  background: #CCC;
}

.item {
  width: 50%;
  background: red;
  border: 2px solid blue;
  padding: 5px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

    <div class="container">
        <div class="item" ng-repeat="data in records">
            {{data.Data}}
        </div>
    </div>

</div>

Upvotes: 1

Kiran Shinde
Kiran Shinde

Reputation: 5982

You can do like this

1) Initialize a variable which will be half of total length of records

<div class="container" ng-init="halfLength=records.length/2">

2) Now in ng-repeat, just put an if statement whether current index is less than half of total records, And print record of current index and current index + halfLength

 <div ng-repeat="data in records" ng-if="$index<halfLength">
      <div class="item">
          {{data.Data}}
      </div>
      <div class="item">
          {{records[halfLength + $index].Data}}
      </div>
   </div>

Whole Example 

<div class="container" ng-init="halfLength=records.length/2">
   <div ng-repeat="data in records" ng-if="$index<halfLength">
      <div class="item">
          {{data.Data}}
      </div>
      <div class="item">
          {{records[halfLength + $index].Data}}
      </div>
   </div>
</div>
<script>
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function ($scope) {
        $scope.records = [{"Data": "Data1"}, {"Data": "Data2"}, {"Data": "Data3"}, {"Data": "Data4"}, 
                          {"Data": "Data5"}, {"Data": "Data6"}, {"Data": "Data7"}, {"Data": "Data8"}, 
                          {"Data": "Data9"}, {"Data": "Data10"}];
    });
</script>

Working example https://jsfiddle.net/o6e58b2y/1/

Upvotes: 1

devqon
devqon

Reputation: 13997

You can do something like this:

<div ng-init="offset = 3">
    <div class="left">
        <div ng-repeat="data in records | limitTo:offset">
            ...
        </div>
    </div>
    <div class="right">
        <div ng-repeat="data in records | limitTo:(offset-list.length)">
            ...
        </div>
    </div>
</div>

Upvotes: 0

Related Questions