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

我有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>

有什么建议吗？

来源

2016-05-31 vitozev

你的意思说白圈可以去如果屏幕较小，红色总是保持在顶部，则更多行？ – jakob

当圆圈变多时，红色将被隐藏（'ng-hide'指令照顾这一点），我只想在可用空间中显示尽可能多的项目，但最后一个项目必须是红色的（因为它已被使用为“全部显示”） – vitozev

顺便说一下，将'vertical-align：top;'添加到'.badge'样式 –

你可以用自定义指令来做到这一点。工作plunker：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 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 
    }); 
    }; 
}])

来源

2016-05-31 19:29:41 Kyle

您可以为固定高度和溢出的按钮添加新的父项div，以便在div更大或调整大小时隐藏它们。

事情是这样的：

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

下面是例子吧http://plnkr.co/edit/LGYdQszYtxtMXB7fxpDs?p=preview

然后在这最后一圈，你只是删除固定高度的点击。

来源

2016-05-31 19:12:40 jakob

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

来源

2016-05-31 19:15:34

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

回答

相关问题