Twitter Bootstrap 列和 Angular 排序方式

Question

我一直运行解决这个问题，还没有找到不会导致布局问题的好的解决方案。在列中显示按字母顺序排序的项目数组的最佳方式是什么？我正在使用 ng-repeat 遍历数组并为每个项目显示一个复选框。我希望数据按字母顺序显示在 n 列中，即不按字母顺序显示在行中。

按字母顺序排列

|item a| |item d| |item g|
|item b| |item e| ...
|item c| |item f| ...

当前实施 - 按字母顺序排列

  <div class="checkbox col-xs-12 col-sm-12 col-md-3 col-lg-3" ng-repeat="user in user.results | orderBy:'lastName' track by user.id">
    <input id="{{ user.id }}" type="checkbox">
    {{ user.lastName }}, {{ user.firstName }}
    <label for="{{ user.id }}" class="pull-left checkbox-label"></label>
  </div>

编辑

我最初使用的是动态 bootstrap 方法，但这实际上搞砸了复选框的行为，即单击复选框会导致选中不正确的复选框。我正在尝试使用 flexbox 解决这个问题，但我以前没有使用过它，也不明白如何动态更改列数而不必在 flex 容器上设置固定高度。我想在 small/extra 小屏幕上有一栏，在 medium/large 屏幕上有三栏。

.flex-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.flex-item {
  background: green;
    width: 33%;
}

/* Small screens */
@media all and (max-width: @container-tablet) {
  .flex-item {
    width: 100%;
  }
}

  <div class="flex-box">
    <div class="flex-item" ng-repeat="country in region.countries | orderBy:'name' track by $index">
      <input id="{{ country.isoCode }}" checklist-model="vm.selectedCountries.value[region.name]" checklist-value="country" type="checkbox" ng-change="vm.setRegionCountry(region, country, checked)">
      <label for="{{ country.isoCode }}" class="pull-left checkbox-label"></label>
      <span>{{ country.name | limitTo:17 }}{{country.name.length > 17 ? '...' : ''}}</span>
    </div>
  </div>

解决方案

.flex-box {
  display: flex;
  flex-flow: column wrap;
}

/* Small screens */
@media all and (min-width: @screen-sm-min) {
    .flex-box {
        max-height: 375px;
    }
}
/* Medium screens */
@media all and (min-width: @screen-md-min) {
    .flex-box {
        max-height: 550px;
    }
}
/* Large screens */
@media all and (min-width: @screen-lg-min) {
    .flex-box {
        max-height: 375px;
    }
}

Answer 1

您可以在不使用列的情况下 bootstrap 执行此操作。看到这个 fiddle：https://jsfiddle.net/ojzdxpt1/1/

#wrapper {
    column-count:3;
    -webkit-column-count:3;
    -moz-column-count:3;
}
.col {
  background:#ccc;
  border:1px solid #000;
}

#wrapper 包含每个转发器。查看有关 css 列的更多信息

Answer 2

<style>
.flex-box {
        height: 100px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .flex-item {
            background: green;
            text-align: center;
    }
</style>
<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <div class="flex-box">
                <div class="flex-item" ng-repeat="user in user.results | orderBy:'lastName'">{{user.id}}</div>
            </div>
        </div>
    </div>
</div>

使用 CSS flexbox，您可以根据数据集的需要动态添加任意数量的列 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

如果您想与 bootstrap 一起使用，您可以按以下方式稍微调整一下。否则，您可以使用 flex-box 或 column-count.

var app = angular.module('app', []);
app.controller('TestController', function($scope){
  $scope.fixedColumn = 3;
  
  $scope.getColumns = function(){
    return new Array($scope.fixedColumn);
  };
  
  $scope.getColumnWidth = function(){
    return Math.floor(12 / $scope.fixedColumn);
  };
  
  $scope.getRowCount = function(){
    return Math.ceil($scope.user.results.length / $scope.fixedColumn);
  };
  
  $scope.user = {
    results: [
      {
        id: 1,
        firstName: 'FirstName1',
        lastName: 'LastName1'
      },
      {
        id: 2,
        firstName: 'FirstName2',
        lastName: 'LastName2'
      },
      {
        id: 3,
        firstName: 'FirstName3',
        lastName: 'LastName3'
      },
      {
        id: 4,
        firstName: 'FirstName4',
        lastName: 'LastName4'
      },
      {
        id: 5,
        firstName: 'FirstName5',
        lastName: 'LastName5'
      },
      {
        id: 6,
        firstName: 'FirstName6',
        lastName: 'LastName6'
      },
      {
        id: 7,
        firstName: 'FirstName7',
        lastName: 'LastName7'
      },
      {
        id: 8,
        firstName: 'FirstName8',
        lastName: 'LastName8'
      }
    ]
  };
});

angular.bootstrap(document, ['app']);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-controller="TestController">
<div class="row" ng-repeat="u in user.results | orderBy:'lastName' track by u.id" ng-init="pIndex=$index" ng-if="$index < getRowCount()">
  <div ng-repeat="col in getColumns() track by $index" ng-init="usr = user.results[pIndex + ($index * getRowCount())]" ng-class="'col-xs-'+ getColumnWidth() + ' col-sm-'+ getColumnWidth() + ' col-md-'+ getColumnWidth()" ng-if="user.results.length > (pIndex + ($index * getRowCount()))">
    <input id="{{ usr.id }}" type="checkbox">
    {{ usr.lastName }}, {{ usr.firstName }}
    <label for="{{ usr.id }}" class="pull-left checkbox-label"></label>
  </div> 
 </div>
 </div>

Twitter Bootstrap 列和 Angular 排序方式

Twitter Bootstrap Columns and Angular Order By

flexbox

twitter-bootstrap

angularjs

angularjs-orderby