Dynamic ng-hide?

Question

I'm trying to hide div based on input. Its a list with a id so currently my div looks like:

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

this outputs: 'hide'-1 in the ng-hide. I've tried removing the '' but then it does not work.

The plan is that each item gets a button, when the button is clicked it would then apply $scope.hide-1 = true;, animating a fade out for that item.

Has anyone hidden items in a list (divs in div) based on button click? How do I go about it?

I'm guessing `item` is the one from `ng-repeat="item in items"` right? Then just do `ng-hide="item.hidden"` and `ng-click="item.hidden = true"`. — Sergiu Paraschiv, Mar 04 '15 at 13:57
Can you post HTML template? There is unclear moments about how `$scope.hide-1` is constructed. — dfsq, Mar 04 '15 at 14:01

dfsq · Answer 1 · 2015-03-04T14:02:51.293

3

You can construct dynamic scope property name like this:

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

Inside of ngHide this points to the scope object ($scope), then you just use bracket notation to build property name using variable.

Note, that $scope.hide-1 is invalid notation, so it would better be $scope.hide1.

edited Mar 04 '15 at 14:02

answered Mar 04 '15 at 13:57

dfsq

191,768
25
236
258

How to you trigger that animation? $scope.hide-??item.Id?? = true? – Jason94 Mar 04 '15 at 14:02
To trigger Angular animation you need to set up corresponding CSS classes. – dfsq Mar 04 '15 at 14:03

score 1 · Answer 2 · answered Mar 04 '15 at 14:00

I would use a function:

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

And in the controller:

var itemIdsToHide = {};

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

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

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

Dynamic ng-hide?

2 Answers2