All geek questions in one place

Angular JS ng-repeat placed in vertical split format

I need to make some changes to the traditional way of viewing angular js ng-repeat. I have JSON data in which there is n amount of data (response from server. Length is not fixed). I need to show data in split format. that is, the number of the first half of the answer should be in a div located vertically, and the second in another div located next to it.

Like this

enter image description here

But for now, what I got is just like a regular JSON replay

like this

enter image description here

How can I convert this format How do I need?

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>
Run codeHide result

I want to achieve this without modifying the JSON data. Thanks in advance.

+4
5

, , : https://plnkr.co/edit/mAFRjwxBfqd0Hq8nShBk?p=preview

<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>
+1

:

1) ,

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

2) ng-repeat if, , + 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>


<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>

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

+1

, CSS 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>
Hide result
+1

- :

<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>
0

CSS: ?

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="angular.js@1.6.1" 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>
Hide result
0

Source: https://habr.com/ru/post/1667997/

More articles:


All Articles