angularjs展開和折疊問題

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>