如何显示在每行的一个项目中显示两个的项目列表答案

【问题标题】：How to display list of items displaying two in a items of each row如何显示在每行的一个项目中显示两个的项目列表
【发布时间】：2015-03-27 11:10:36
【问题描述】：

我正在使用 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
电子电气设备

如何从单个列表中显示？

【问题讨论】：

标签： css angularjs

【解决方案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>

【讨论】：

虽然我为这个问题提供了 HTML 解决方案，但 CSS 是处理这个问题的理想方法。 flex 唯一关心的是 IE 兼容性，具体取决于目标浏览器是什么。 caniuse.com/#search=flex

【解决方案2】：

好吧，您可以使用 $even 和 $last 的组合来执行此操作：

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

见小demo。

【讨论】：

稍作修改：
{{ item.name }}

【解决方案3】：

您可以检查 ng-repeat 中的索引是否为偶数（或奇数）并调整您的 HTML 标记：

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

【讨论】：

【解决方案4】：

一个简短的选择是这样做：

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

工作示例：http://plnkr.co/edit/M2x14iaIEsOxkSKp5TO3?p=preview

虽然此解决方案将满足标准，但 CSS 解决方案将是理想的解决方案，因为您将通过级联样式表指定外观（样式）（请参阅 DTing 的答案）

【讨论】：

【解决方案5】：

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

【讨论】：

检查是否满足您的需求并回复。