Wie man ng-Klasse umschalten

Question

In dieser ng-Wiederholung werde ich die ersten 2 Zeilen anzeigen. während ich klicke, zeige mehr, wie kann ich die css display ändern: block. Show More sollte umgeschaltet werden.

JSON

"one":[{ 
     "name":"Raseberry Lemon Cake" 
    }] 
"two":[{ 
     "name":"Raseberry Lemon Cake" 
    }] 
"three":[{ 
     "name":"Raseberry Lemon Cake" 
    }] 
"four":[{ 
     "name":"Raseberry Lemon Cake" 
    }] 
"five":[{ 
     "name":"Raseberry Lemon Cake" 
    }] 

HTML

<div class="GridBrd" ng-repeat="Detail in Results" 
    ng-class='{showflight: $index > 1}'> </div> 

    <span class="moreOpt" ng-click="show()" 
     <a href="javascript:void(0);">Show More</a> 
    </span> 

css

.showflight{ 
    display:none; 
} 

Script

$scope.show = function(){ 
    ***----how can I change the ng-class block and none here?----*** 
} 

Answer 1

Als eine alternative Antwort vielleicht könnten Sie limitTo eingebauten Filter auf Ihrem ngRepeat verwenden. Die Idee ist, dass Sie eine Schaltfläche haben, um den Ausdruck umzuschalten, und das LimitTo schaltet auf die maximale Länge der Elemente um, wenn showAll wahr ist, und wird auf 2 zurückgesetzt, wenn false;

z.B.

<button ng-click="$ctrl.showAll = !$ctrl.showAll">Toggle</button> 

<ul> 
    <li ng-repeat="item in $ctrl.items | limitTo: ($ctrl.showAll ? $ctrl.items.length : 2)">{{item}}</li> 
</ul> 

Working demo

Answer 2

CSS:

.displayBlock { 
    display: block; 
} 
.displayNone { 
    display: none; 
} 

und in controller.js:

$scope.variable = false; 
if(your condition) { 
    $scope.variable = true; 
} 

Das ist, wie Sie CSS-Klasse in Winkel ändern können. Vielleicht ist es Overkill, aber ich hoffe es kann helfen.

Answer 3

Versuchen Sie folgendes:

HTML

<div class="GridBrd" ng-repeat="Detail in Results" 
ng-class='{showflight: $index > 1 && !showAll}'> </div> 

<span class="moreOpt" ng-click="showAll = !showAll"> 
    <a href="javascript:void(0);">Show More</a> 
</span>