Javascript 安格拉斯拓展公司；崩溃问题

我是angularjs的新手，目前正面临这个问题

问题

当我单击任何节点时，所有节点都将展开或折叠。 例如：（单击节点之前）

单击节点后

 <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>

代码

 <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>

数据可视化
AGV里程与时间戳的对比
电路板温度与时间戳的对比
激光传感器输出与时间戳的对比
电池电流与时间戳的对比

如果可能，我如何将“数据可视化”声明为父节点和 其他节点作为子节点，然后执行展开和折叠

---

请提前告知我，谢谢。

每个项目都需要有自己的

折叠状态。例如：

项目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>


AGV里程与时间戳的对比

第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>


激光传感器输出与时间戳的对比

第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>


电池电流与时间戳的对比
每个项目都需要有自己独立的
折叠状态。例如：

项目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>


AGV里程与时间戳的对比

第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>


激光传感器输出与时间戳的对比

第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>


电池电流与时间戳的对比
Its，因为您已将所有的
ng show
指令绑定到同一个变量
collapsed
。您需要一个单独的变量，以便可以独立折叠/展开。您应该签出
ng repeat
，因为您可能应该在一组对象上进行迭代，以删除模板中的所有重复项，同时您可以将
ng show
绑定到
ng repeat
中对象的属性，并附上感谢=）这是因为您已经绑定了所有
ng show
指向同一变量的指令已折叠。您需要一个单独的变量，以便可以独立折叠/展开。您应该签出
ng repeat
，因为您可能需要迭代一组对象以删除模板中的所有重复项，同时您可以将
ng show
绑定到
ng repeat
中对象的属性，并附带感谢=）太好了，很高兴提供帮助！太好了，很高兴帮忙！