动态ng-hide？

Question

我试图根据输入隐藏div。它是一个带有id的列表，所以目前我的div看起来像：

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

此输出'hide'-1中的ng-hide。我试过删除＆＃39;＆＃39;但它不起作用。

计划是每个项目都有一个按钮，当点击按钮时，它会应用$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];
};