如何在AngularJS的動態行中顯示和隱藏項目？

Question

我是AngularJS的新手，我似乎無法找到適當的方法來做到這一點。我創建了一個自定義指令來在行索引中應用函數a pass。不過，我似乎無法想象連續顯示項目的方式。什麼是最好的方法來做到這一點？我想通過控制器顯示特定的並隱藏目標行。

HTML：

<div class="row" data-index="{{$index}}"> 
    <div>other information</div> 
    <div class="item hidden" ng-class="{hidden: hidden[{{$index}}]}"> 
     Item  
    </div> 
</div> 

我的指令：

scope.$apply(function() { 
    scope.$parent.showItem(index); 
}); 

控制器：

$scope.teamDrop = function(index) { 
    $scope.hidden[index] = false; 
}; 

Answer 1

可以使用ng-show和ng-hide指令隱藏和顯示元素。

您也可以使用ng-if指令從dom中刪除元素。

爲了您的例子中，我會改變你的ng-class到ng-hide

<div class="row" data-index="{{$index}}"> 
    <div>other information</div> 
    <div class="item hidden" ng-hide="hidden[$index]"> 
     Item  
    </div> 
</div> 

你也不需要使用{{}}語法在納克級becausue它已經預期的角度表達，這是數據綁定。