觸發額外的細節爲ngRepeat

Question

我工作在客戶端已提供的HTML一堆，我需要從我們的數據庫插件中的數據，並已打的我發現難問題的項目中記錄解決....

所以，第一個問題是路由

<div ng-repeat="class in vm.classes"> 
    <div class="class-overview"> 
     <a href="#"> 
      <span class="class-title">{{class.description}}</span> 
      ... more stuff here 
     </a> 
    </div> 
    <div class="class-information collapse"> 
     <div class="full-width"> 
       {{class.longDescription}} 
     </div> 
    </div> 
</div> 

他提供一些JavaScript來處理類概述

$('.class-overview a').on('click',function(e) { 
    e.preventDefault(); 
}); 
$('.class-overview').on('click',function() { 
    $('.class-overview.active').removeClass('active').next('.class-information').collapse('hide'); 
    $(this).addClass('active').next('.class-information').collapse('show');//.css('top',offset).collapse('show'); 
}); 

點擊和我有一個在我的州供應商這樣的線路

// default route 
$urlrouterProvider.otherwise("/") 

所以問題是，ui路由器處理點擊並將我發回主頁。

理想的解決方案是讓儘可能多的他標記的完好，所以任何人都可以告訴我如何阻止用戶界面路由器處理的點擊？

或做不到這一點，我怎麼可能會使用NG-點擊和NG-秀得到相同的效果，即隱藏和顯示類信息的div ...

Answer 1

如果我沒有理解好你的問題，你想在單擊.class-overview元素時顯示.class-information div。

可以通過使用一個變量在ng-show這樣進行：

<div ng-repeat="class in vm.classes"> 
    <div class="class-overview"> 
    <a href="#" ng-click="display = !display"> 
     <span class="class-title">{{class.description}}</span> 
     ... more stuff here 
    </a> 
    </div> 
    <div class="class-information" ng-show="display"> 
    <div class="full-width"> 
     {{class.longDescription}} 
    </div> 
    </div> 
</div> 

當你登陸頁面上，因此ng-click將被執行的display變量將是falsy，這個變量將被設置到true。

我看你使用的是collapse類，如果它被摺疊隱藏內容。然後，當display變量爲假時，您可以使用角ng-class來放置collapse類。你div.class-information應該是這樣的：

<div class="class-information" ng-class="{collapse: !display}"> 
    <div class="full-width"> 
    {{class.longDescription}} 
    </div> 
</div>