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

作为替代答案，您可以在limitTo上使用ngRepeat内置过滤器。我们的想法是，您有一个切换表达式的按钮，限制在showAll为真时将切换到项目的最大长度，如果为假，则会在2上回退;

e.g。

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

如何切换ng-class

3 个答案: