Question

看看下面的图片：

我有following代码，现在我想在一行中始终显示所有项目（圆圈）（取决于屏幕尺寸），但最后一项应始终就位（在桌面，平板电脑上，移动）。

<body ng-controller="MainCtrl">
  <button class="btn-select-user" ng-repeat="item in items | limitTo: limit as result">
    <span>
      <img ng-class="{}" ng-src="https://graph.facebook.com/4/picture?height=46&amp;type=square&amp;width=46" width="40" height="40" src="https://graph.facebook.com/4/picture?height=46&amp;type=square&amp;width=46">
    </span>
  </button>
  <span class="badge pull-right" ng-click="limit = items.length" ng-hide="limit == items.length">Show all</span>
</body>

有什么建议吗？

Answer 1

您可以使用自定义指令执行此操作。工作人员：http://plnkr.co/edit/4m3xU5JQqL4R5YPrYIdC?p=preview

<span ng-repeat="item in items | limitTo:numDisplay">
  <span class="huge" ng-class="{'last':$last}">{{item}}</span>
</span>

您需要将此指令添加到body标签：

<body resizable>

指令：

app.directive("resizable", ["$window", function($window){
  return function($scope) {
    $scope.initializeWindowSize = function() {
      //do the screen width check
      if($window.innerWidth < 641)
        $scope.numDisplay = 3;
      else if($window.innerWidth > 640 && $window.innerWidth < 800)
        $scope.numDisplay = 5;
      else
        $scope.numDisplay = 10;

      //check console see if it's correct
      console.log($window.innerWidth, $scope.numDisplay);

      //return the inner width
      return $scope.windowWidth = $window.innerWidth;
    };

    $scope.initializeWindowSize();

    return angular.element($window).bind('resize', function() {
      $scope.initializeWindowSize();
      return $scope.$apply(); //run digest
    });
  };
}])

Answer 2

您可以为具有固定高度和溢出的按钮添加新的父div，这样它们就会隐藏，直到div变大或调整大小。

这样的事情：

.buttons {
  width: calc(100% - 40px);
  height: 40px;
  overflow: hidden;
  float: left;
}

以下是http://plnkr.co/edit/LGYdQszYtxtMXB7fxpDs?p=preview

的示例

然后点击最后一个圆圈，您只需移除固定高度。

Answer 3

现在你输出10个圆圈+ 1个圆圈，最后是纯色。为了便于使用，我会坚持使用固定数量的圆圈，并根据屏幕尺寸更改这些圆圈的尺寸。

显示一行中的所有项目，但保留最后一个项目空间？

3 个答案: