Div無法正確顯示與angularjs

Question

我想顯示/隱藏div元素。所以它會列出一個hopspital，然後當它被點擊時，它應該使用angularjs顯示以下信息。如果我在數據「ng-if =」x.collegeID == returnSchool（）「中刪除'ng-repeat =」x，則下拉效果將起作用，但顯然沒有來自我的JSON對象的數據。如果我刪除了'class ='drop-panel animated fadeIn''，那麼你不需要點擊醫院名稱，所有信息都會顯示給你（沒有下拉效果）。我無法弄清楚我做錯了什麼。我只希望能夠點擊醫院名稱，然後將與該醫院相關的信息顯示在其下方。

localHospital.html

<!-- resource start --> 

     <div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()"> 

      <!-- resource header & icon --> 

      <div class="list-item question"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div> 

      <!-- resource data --> 

      <div class="drop-panel animated fadeIn"> 

       <!-- phone number --> 

       <p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p> 
       <a href="tel:{{x.hospitalPhoneNumber}}" target="_blank"><p class="resource-content">{{x.hospitalPhoneNumber}}</p></a> 

       <!-- location --> 

       <p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p> 
       <a href="http://maps.google.com/?q={{x.hospitalAddress}}" target="_blank"><p class="resource-content">{{x.hospitalAddress}}</p></a> 

       <!-- directions --> 

       <p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p> 
       <a href="{{x.hospitalDirections}}" target="_blank"><p class="resource-content">{{x.hospitalDirections}}</p></a> 

      </div> 

     </div> 

<!-- resource end --> 

的style.css

.drop-panel { 
display: none; 
} 

.drop-panel.show { 
    display: block !important; 
} 

Answer 1

我最終通過使用ng-show命令解決了這個問題，但是我不只是用ng-show來切換ng-if。我最終擺脫了div中的drop-panel css類，並添加了'ng-click =「showDetails =！showDetails」'，然後和'ng-show =「showDetails」'，它們會打開和關閉div被點擊。

正是從這個Show hidden div on ng-click within ng-repeat

localHospitals.html

 <!-- resource start --> 

     <div class="resource" ng-repeat="x in data" ng-if="x.collegeID == returnSchool()"> 

      <!-- resource header & icon --> 

      <div class="list-item question" ng-click="showDetails = ! showDetails"><h1><span><img src="{{x.hospitalLogo}}" alt="Timer Icon"></span>{{x.hospitalName}}</h1></div> 

      <!-- resource data --> 

      <div class="animated fadeIn" ng-show="showDetails"> 

       <!-- phone number --> 

       <p class="resource-title"><img src="img/icons/phone.png" alt="Icon">Phone Number</p> 
       <a href="tel:{{x.hospitalPhoneNumber}}" target="_blank"><p class="resource-content">{{x.hospitalPhoneNumber}}</p></a> 

       <!-- location --> 

       <p class="resource-title"><img src="img/icons/location.png" alt="Icon">Location</p> 
       <a href="http://maps.google.com/?q={{x.hospitalAddress}}" target="_blank"><p class="resource-content">{{x.hospitalAddress}}</p></a> 

       <!-- directions --> 

       <p class="resource-title"><img src="img/icons/link.png" alt="Icon">Directions</p> 
       <a href="{{x.hospitalDirections}}" target="_blank"><p class="resource-content">{{x.hospitalDirections}}</p></a> 

      </div> 

     </div> 

    <!-- resource end --> 

Answer 2

嘗試改變ng-if到ng-show。只有當用戶點擊它時，ng-if纔會將元素添加到DOM，這意味着它可能會搞亂樣式的顯示/隱藏行爲。