动态ng-hide？

Question

我试图根据输入来隐藏div。这是一个带有id的列表，所以目前我的div如下所示：

<div class="animate-show" ng-hide="'hide'-{{item.Id}}">

这将输出：ng-hide中的'hide'-1。我试着去掉'‘，但它不起作用。

我们的计划是，每个项目都有一个按钮，当按钮被点击时，它将应用$scope.hide-1 = true;，为该项目设置淡出动画。

有没有人在列表(div中的div)中隐藏基于按钮单击的项？我该怎么做呢？

Answer 1

您可以像这样构造动态作用域属性名称：

<div class="animate-show" ng-hide="this['hide-' + item.Id]">

在ngHide内部，this指向作用域对象($scope)，然后您只需使用括号表示法来使用变量构建属性名称。

请注意，$scope.hide-1是无效的表示法，因此最好是$scope.hide1。

Answer 2

我会使用一个函数：

ng-hide="shouldHide(item.Id)"

在控制器中：

var itemIdsToHide = {};

$scope.shouldHide = function(itemId) {
    return itemIdsToHide[itemId];
};

$scope.hideItem = function(itemId) {
    itemIdsToHide[itemId] = true;
};

$scope.showItem = function(itemId) {
    delete itemIdsToHide[itemId];
};