angularjs展开和折叠问题答案

【问题标题】：angularjs expand & collapse issueangularjs展开和折叠问题
【发布时间】：2017-06-06 16:56:07
【问题描述】：

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

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

请赐教，在此先感谢。

【问题讨论】：

这是因为您已将所有ng-show 指令绑定到同一个变量collapsed。您需要一个单独的变量，以便您可以独立折叠/展开。您应该查看ng-repeat，因为您可能应该遍历对象数组以删除模板中的所有重复项，同时您可以将ng-show 绑定到ng-repeat
表示感谢 =)

标签： javascript jquery angularjs

【解决方案1】：

每个项目都需要有自己独立的collapsed 状态。例如：

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

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

【讨论】：

太好了，很高兴为您提供帮助！