ng-classを切り替えるには

Question

このng-repeatでは、最初の2行を表示します。私はshow moreをクリックしていますが、どのようにしてcss display：blockを変更できますか？もっと表示するにはトグルする必要があります。

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

スクリプト

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

Answer 1

ngRepeatには、おそらくlimitToビルトインフィルタを使用できます。考え方は、式をトグルするボタンがあり、showAllが真であるときにlimitToがアイテムの最大長に切り替わり、偽のとき2にフォールバックするという考えです。

<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

<div ng-class="{ 'displayBlock' : variable, 'displayNone' : !variable }"> 
    ... 
</div> 

CSS：

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

とcontroller.js中：

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

あなたが角度にCSSクラスを変更する方法です。 恐ろしいことかもしれませんが、助けてくれることを願っています。

Answer 3

これを試してみてください：

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>