css - 如何显示在每行的元素中显示两个的元素列表

Question

我正在使用 angular js 来显示名称。名单的json结构如下。

    [{
          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
     }] 

我需要使用 ng-repeat 呈现名称，但要像下面这样在行中显示两个名称。

AAA BBB
CCC DDD
电子电气工程

如何从单个列表显示？

Answer 1

你可以在 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>