Alle Artikel in einer Zeile anzeigen, aber den letzten Artikelplatz beibehalten?

Werfen Sie einen Blick auf das folgende Bild:Alle Artikel in einer Zeile anzeigen, aber den letzten Artikelplatz beibehalten?

Ich habe den following Code, und jetzt will ich alle Einträge anzuzeigen (Kreise) immer (abhängig von der Größe des Displays) in einer Reihe, aber die letzte Der Artikel sollte immer vorhanden sein (auf dem Desktop, Tablet, Handy).

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

Irgendwelche Vorschläge?

Quelle

2016-05-31 vitozev

tun Sie bedeuten, dass weißen Kreise gehen in mehreren Reihen, wenn der Bildschirm kleiner ist und Rot immer alleine oben bleibt? – jakob

Wenn die Kreise mehr gehen, wird das Rot ausgeblendet ('ng-hide' Direktive dafür sorgen), ich möchte nur so viele Elemente wie möglich im verfügbaren Platz anzeigen, aber das letzte Element muss rot sein (wie es verwendet wird für "show all") – vitozev

BTW, fügen Sie 'vertical-align: top;' zum '.badge'-Stil hinzu –

Sie können dies mit einer benutzerdefinierten Anweisung tun. Arbeiten 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>

Sie müssen diese Anweisung, um den Körper Tag hinzuzufügen:

<body resizable>

Die Richtlinie:

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 
    }); 
    }; 
}])

Quelle

2016-05-31 19:29:41 Kyle

Sie könnten neue Eltern div für Schaltflächen mit fester Höhe und Überlauf hinzufügen, so dass sie ausgeblendet werden, bis Div größer oder in der Größe ist.

Etwas wie folgt aus:

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

Hier ist Beispiel dafür http://plnkr.co/edit/LGYdQszYtxtMXB7fxpDs?p=preview

klicken dann auf dieses letzten Kreis Sie nur feste Höhe entfernen.

Quelle

2016-05-31 19:12:40 jakob

Im Moment geben Sie 10 Kreise + 1 Kreis aus, der am Ende eine feste Farbe hat. Aus Gründen der Benutzerfreundlichkeit bleibe ich bei einer festen Anzahl von Kreisen und ändere die Dimensionen dieser Kreise abhängig von der Bildschirmgröße.

Quelle

2016-05-31 19:15:34

Alle Artikel in einer Zeile anzeigen, aber den letzten Artikelplatz beibehalten?

Antwort

Verwandte Themen