Question

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

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

请提前通知我。

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

angularjs扩展＆amp;崩溃问题

1 个答案: