javascript - 如何切换 ng 类

Question

在这个 ng-repeat 中，我将显示前两行。当我点击显示更多时，如何更改 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