触发额外的细节为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>