顯示一行中的所有項目，但保留最後一項空間？

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

顯示一行中的所有項目，但保留最後一項空間？

回答

相關問題