angularjs expand & collapse issue

Question

I am new in angularjs and currently i'm facing this issue.

Problem

when i clicked on any of the node, all the nodes will be expanded or collapsed. For example : (Before clicking on the node)

After clicking on the node

Code

 <div class="item">Data Visualization</div>
      <div class= "item">
           <i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> &nbsp;AGV Mileage Vs Timestamp</strong></i>
           <div ng-show="collapsed">&nbsp;&nbsp; 

              <div id ="agvmileage">
                <div class = "horizon">
                    <canvas width="960" height="120">
                    <script src="/static/js/frontend/cubi-agv.js"></script>
                </div>
              </div>

           </div>
      </div>

      <div class= "item">
           <i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> &nbsp;Board Temperature Vs Timestamp</strong></i>
           <div ng-show="collapsed">&nbsp;&nbsp; 

              <div id ="agvmileage">
                <div class = "horizon">
                    <canvas width="960" height="120">
                    <script src="/static/js/frontend/cubi-agv.js"></script>
                </div>
              </div>

           </div>
      </div>

      <div class= "item">
           <i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> &nbsp;Laser Sensor Output Vs Timestamp</strong></i>
           <div ng-show="collapsed">&nbsp;&nbsp; 

              <div id ="agvmileage">
                <div class = "horizon">
                    <canvas width="960" height="120">
                    <script src="/static/js/frontend/cubi-agv.js"></script>
                </div>
              </div>

           </div>
      </div>

      <div class= "item">
           <i class="icon ion-arrow-right-b" ng-model="collapsed" ng-click="collapsed=!collapsed"><strong> &nbsp;Battery Current Vs Timestamp</strong></i>
           <div ng-show="collapsed">&nbsp;&nbsp; 

              <div id ="agvmileage">
                <div class = "horizon">
                    <canvas width="960" height="120">
                    <script src="/static/js/frontend/cubi-agv.js"></script>
                </div>
              </div>

           </div>
      </div>

And if possible, how can i declare the "data visualization" as parent node and others as child node then perform expand and collapse.

Please enlighten me on this, thanks in advance.

Its because you have bound all the ng-show directives to the same variable collapsed. You need a separate variable so you can collapse/expand independently. You should check out ng-repeat as you should probably be iterating over an array of objects to remove all the duplication in your template and at the same time you can bind your ng-show to a property of the object within the ng-repeat — mahi-man

Vladimir Zdenek Vladimir Zdenek · Accepted Answer · 2017-06-06T08:56:07

Each item needs to have its own separate collapsed state. For example:

Item 1

<i ng-model="collapsedMileage" ng-click="collapsedMileage = !collapsedMileage">
    <strong>AGV Mileage Vs Timestamp</strong>
</i>
<div ng-show="collapsedMileage">
    <!-- the rest of your template -->
</div>

Item 2

<i ng-model="collapsedLaser" ng-click="collapsedLaser = !collapsedLaser">
    <strong>Laser Sensor Output Vs Timestamp</strong>
</i>
<div ng-show="collapsedLaser ">
    <!-- the rest of your template -->
</div>

Item 3

<i ng-model="collapsedBattery" ng-click="collapsedBattery = !collapsedBattery">
    <strong>Battery Current Vs Timestamp</strong>
</i>
<div ng-show="collapsedBattery">
    <!-- the rest of your template -->
</div>

angularjs expand & collapse issue

1 Answers