How to display list of items displaying two in a items of each row

0
votes


I am using angular js to display the names. The json structure of name list is like below.

    [{
          name: AAA,
          city : City A   
     },
     { 
         name : BBB,
         city L City B
     },
     {
          name: CCC,
          city : City C   
     },
     { 
         name : DDD,
         city : City D
     },
     { 
         name : EEE,
         city : City E
     }]

I need to render the names using ng-repeat, but to display two name in row like below.

AAA BBB
CCC DDD
EEE

How can i display from the single list?

5
cssangularjs

5 Answers

2
votes

You can do this in css.

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.data = [{
    name: "AAA",
    city: "City A"
  }, {
    name: "BBB",
    city: "L City B"
  }, {
    name: "CCC",
    city: "City C"
  }, {
    name: "DDD",
    city: "City D"
  }, {
    name: "EEE",
    city: "City E"
  }];
});
.container {
  display: flex;
  direction: column;
  flex-wrap: wrap;
  width: 100px;
}

.item {
  display: block;
  width: 50px;  
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="myController">
    <div class="container">
      <div class="item" ng-repeat="item in data">
        {{item.name}}
      </div>
    </div>
  </div>
</div>
1
votes

Well, you could use a combination of $even and $last to do this:

<div ng-repeat="item in items" ng-if="$even">        
    <span>{{ item.name }}</span>
    <span ng-if="!$last"> {{ items[$index+1].name }}</span>
</div>

See little demo.

0
votes

You can check if your index inside ng-repeat is even (or odd) and adapt your HTML markup :

<div ng-repeat="item in items">
    <div class="row" ng-if="$even"> //will print if $index is even
    </div>
</div>
0
votes

A short option would be to do this:

<span ng-repeat="item in main.listItems">
  {{item.name}}
  <br ng-if="$odd"/>
</span>

Working example: http://plnkr.co/edit/M2x14iaIEsOxkSKp5TO3?p=preview

While this solution will meet the criteria, a CSS solution would be the ideal solution since you would be dictating the appearance (style) via cascading STYLE sheets (see the answer by DTing)

0
votes

HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="AlertDemoCtrl">
  <ul id="display-inline-block-example">
    <li class="list-unstyled" ng-repeat="alert in alerts">{{alert.name}}</li>
  </ul>

</div>
  </body>
</html>

Angular

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('democtrl', function ($scope) {
  $scope.alerts = [{
          name: 'AAA',
          city : 'City A'   
     },
     { 
         name : 'BBB',
         city : 'City B'
     },
     {
          name: 'CCC',
          city : 'City C'   
     },
     { 
         name : 'DDD',
         city : 'City D'
     },
     { 
         name : 'EEE',
         city : 'City E'
     }];


});

CSS

ul#display-inline-block-example,
    ul#display-inline-block-example li {
        /* Setting a common base */
        margin: 0;
        padding: 0;
    }

     ul#display-inline-block-example {
      width: 300px;
      border: 1px solid #000;
    } 

    ul#display-inline-block-example li {
        display: inline-block;
        width: 100px;
        min-height: 100px;
        /* background: #ccc; */
        vertical-align: top;

        /* For IE 7 */
        zoom: 1;
        *display: inline;
    }

http://plnkr.co/edit/Yr2i4qsnooVUmo1gpBux?p=preview