Angularjs Aufruf Clearfixes auf der Grundlage der Bildschirmgröße mit ng-if

Question

Ich möchte meine Spalten in 3 Spalten pro Zeile auf mittleren und größeren Bildschirmgrößen (Col-md-4), 2 Spalten pro Zeile auf kleineren Bildschirmgrößen und 1 angezeigt werden Spalte pro Zeile auf extra klein (col-sm-6), aber wenn ich meine App auf meinem Tablet anschaue, bekomme ich schwebende Spalten in den 2 Spaltenzeilen. Ich weiß, ihr möglich, eine clearfix Klasse mit verwenden ng-wenn es zu sagen, zu einer Säule machen alle so viele Zeilen, aber wenn ich benutze:

<div class='clearfix' ng-if='$index % 2 == 0'>

es wird meine Spalten machen alle 2 eine neue Zeile erstellen Spalten, auch auf größeren Bildschirmen, was ist nicht was ich will. Ist es möglich, ng-wenn nur den Clearfix nach 2 Spalten ausschließlich auf die Col-SM-Klasse, und nicht auf die Col-md-Klasse hinzufügen?

Answer 1

Ja, Sie können es tun, indem Sie zum Fenster resize Ereignis, Basierend auf der Bildschirm-Innenbreite können Sie die div.clearfix an die Dom mit ng-if anhängen oder abtrennen.

EX:

Controller:

halten eine Variable darstellt, die Fensterbreite $scope.windowWidth

app.controller('MainCtrl', function($scope, $window, $timeout) { 
    $scope.windowWidth = $window.innerWidth; 

    $window.onresize = function(event) { 
    $timeout(function() { 
     $scope.windowWidth = $window.innerWidth; 
    }); 
    }; 
}); 

Ausblick:

Schließen Sie das div an IF windowWidth < = 768 ELSE Entfernen Sie das Div aus dem DOM.

<div class="tab-only clearfix" ng-if="windowWidth <= 768"> 
    This will show only on min-width : 768px 
</div> 

hier ist ein DEMO

Please search for if there is any css fixes for this.