How to hide show div by using dynamic id in AngularJS

Question

My code as below in html file:

<ul class="main-icons"  ng-if="showMainIcons">
   <li ng-repeat="programData in tab.data">
      <img src="{{programData.icon}}"
           ng-click="programClicked($event,programData,tab)">
       // some another codes
    </li>
</ul>

<ul class="details-icons"  ng-show="tab.data.id"> 
   // some codes
</ul>

code in controller

$scope.programClicked = function($event,programData, tabData) {

        var newVar =  tabData.data.id;
        $scope.newVar = true;
        $scope.showMainIcons = false;
}

I am displaying multiple tabs, now in one tab if I click on some icon it will display the details, instead of this it is displaying all tabs details, not particular tab and I have to pass param in function while using ng-click

also I tried to pass the flag variable true/ false, its also displaying all tabs as like in controller

$scope.showDetails = true; 
$scope.showMainIcons = false

Thanks in advance

You realize that this var newVar = tabData.id; is never used? — Chris
– Chris, Commented Mar 12, 2019 at 14:31
you are looping over tab.data, so I guess tab.data is an array. And you are writing tab.data.id in ng-show - shouldn't it be something like tab.data[0].id? I meant shouldn't you use an index to access that? — Arnab Roy
– Arnab Roy, Commented Mar 12, 2019 at 14:45
@Chris it is my way, that I am implemented this way, its not working, I need and idea, how to display div by using dynamic id — Ritesh Arora
– Ritesh Arora, Commented Mar 12, 2019 at 14:47
@ArnabRoy, yes, its so, its bunch of multiple array, I am getting it by ng-repeat, I want to display div by passing dynamic id, if I pass same variable name or id, then it is displaying all tabs at a time, I want if I click on particular tab, then on particular tab data will display — Ritesh Arora
– Ritesh Arora, Commented Mar 12, 2019 at 14:49

Prabhat · Accepted Answer · 2019-03-13 06:22:29Z

0

As I can see your html code is :

<ul class="details-icons"  ng-show="tab.data.id"> 
   // some codes
</ul>

so here you are using: "tab.data.id" but in controller you are using : var newVar = tabData.id; I think it should : var newVar = tab.data.id;

answered Mar 13, 2019 at 6:22

Prabhat

11 bronze badge

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

1 Comment

Ritesh Arora Over a year ago

I used the same way in html, and I am passing tab varibale from html and getting this value in tabData varibale. When I tried this way then its not working

Collectives™ on Stack Overflow

How to hide show div by using dynamic id in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related