Wie man ng-Klasse basierend auf Fenster (Re) Größe und auf Array-Länge

Question

ändern, bitte helfen Sie mir mit dem folgenden.

Mein html:

<div id="button1" ng-hide="videopagepanel.indexOf('l') >= 0" class="col-md-1"> 
    <a ng-click="videopagepanel = videopagepanel + 'l';" ></a> 
</div> 

<div id="button2" ng-show="videopagepanel.indexOf('l') >= 0" class="col-md-3">   
    <a ng-click="videopagepanel = videopagepanel.indexOf('l') >= 0?videopagepanel.replace('l', ''):'l' + videopagepanel"></a> 
</div> 


<div id="page-content" ng-class="'col-md-' + (colnrpagecont - videopagepanel.length)"> 
    Some content 
</div> 

Meine jQuery:

$(window).resize(function ($window) { 

    if ($window.innerWidth < 992) { 
     $scope.videopagepanel = 'lr'; 
    } 

    else if ($window.innerWidth < 1200) { 
     $scope.videopagepanel = $scope.videopagepanel.replace('r', ''); 
     $scope.colnrpagecont =$scope.videopagepanel.length===1?10:11; 

    } 

}); 

Wenn ich verkleinert das Fenster zum Beispiel 1100px, der Anfangszustand ist, dass # button2 zeigt sich mit col-md -3 und # page-content div hat die Spaltengröße col-md-9. Wenn ich aus diesem Zustand auf # button2 klicke, verschwindet es und # button1 erscheint mit col-md-1. Das Problem ist, dass die Spalte # page-content nicht auf col-md-11 passt.

Was läuft falsch? Es scheint, dass angular das Update nicht auf die jQuery-Bedingung (en) oder den Bereich verschiebt.

Vielen Dank für Ihre Hilfe, wie ich Tage und Stunden für dieses Problem gekämpft habe!

Answer 1

Verwenden Sie window oder $(window) anstelle von (die ich glaube, ist nicht definiert).

Auch für Performance-Problem ist es besser,

$scope.videopagepanel = "l"; 

statt

$scope.videopagepanel = $scope.videopagepanel.replace('r', '');