Question

我是AngularJS的新手，我似乎无法找到适当的方法。我创建了一个自定义指令，用于在索引行中应用函数传递。但是，我似乎无法想到连续显示项目的方式。最好的方法是什么？我想通过控制器显示特定的并隐藏目标行。

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>

你也不需要在ng-class中使用{{}}语法，因为它已经预期了一个角度表达式，这是用于数据绑定的。

如何在AngularJS中显示和隐藏动态行中的项目？

1 个答案: