How to show and hide items in dynamic rows in AngularJS?

Question

I'm fairly new to AngularJS and I can't seem to find a way to do this appropriately. I created a custom directive to Apply a function a pass in the row Index. However, I can't seem to think of the way to show items in a row. What would be the best way to do this? I want to show specific and hide a target row via controller.

HTML:

<div class="row" data-index="{{$index}}">
   <div>other information</div>
   <div class="item hidden" ng-class="{hidden: hidden[{{$index}}]}">
         Item     
    </div>
</div>

My Directive:

 scope.$apply(function () {
     scope.$parent.showItem(index);
 });

Controller:

$scope.teamDrop = function(index) {
    $scope.hidden[index] = false;
};

BenCr · Accepted Answer · 2014-03-29 22:03:04Z

2

You can use the ng-show and ng-hide directives to hide and show elements.

You can also use the ng-if directive to remove elements from the dom.

For your example I'd change your ng-class to an ng-hide

<div class="row" data-index="{{$index}}">
   <div>other information</div>
   <div class="item hidden" ng-hide="hidden[$index]">
         Item     
    </div>
</div>

You also don't need to use the {{}} syntax in the ng-class becausue it's already expecting an angular expression, that's for data binding.

answered Mar 29, 2014 at 22:03

BenCr

6,0525 gold badges47 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

xivo Over a year ago

I am currently using directives, but I am trying to figure out how I can target a specific row.

BenCr Over a year ago

I assumed your array contains a list of booleans

xivo Over a year ago

Do i have to declare an array of booleans or can I use !! ?

BenCr Over a year ago

You can use any expression there which returns a boolean. Expressions are evaluated against the scope, so if your scope has a function shouldShow(index) you can use the result of that method call or you can simply compare a scope property to a literal value ($index % 2) == 1.

Collectives™ on Stack Overflow

How to show and hide items in dynamic rows in AngularJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related