Question

我使用角度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
EEE

如何从单个列表中显示？

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>

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 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

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

5 个答案: