angularjs - 动态 ng-hide？

Question

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

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

这输出：'hide'-1在ng-hide. 我试过删除''但它不起作用。

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