Angular ng-repeat a href =＃and toogle not working

Question

repeat我不能運行href =＃所以我無法運行javascript函數。 a.click將打開toogle文字，或a.click將關閉toogle文字。

的JavaScript：

<script> 
$(".toggle-container").hide(); 
$(".trigger").toggle(function(){ 
    $(this).addClass("active"); 
    }, function() { 
    $(this).removeClass("active"); 
}); 
$(".trigger").click(function(){ 
    $(this).next(".toggle-container").slideToggle(); 
}); 

$(".trigger.opened").toggle(function(){ 
    $(this).removeClass("active"); 
    }, function() { 
    $(this).addClass("active"); 
}); 

$(".trigger.opened").addClass("active").next(".toggle-container").show(); 

的toogle格：

 <div class="toggle-wrap" ng-repeat="question in questions"> 
      <span class="trigger opened"><a href="#"><i class="toggle-icon"></i>{{question.title}}</a></span> 
      <div class="toggle-container" > 
       <p>{{question.text}}</p> 
      </div> 
     </div> 

Answer 1

也許最好不要使用jquery爲此，只要使用的角度，你有一個重複的，所以你可以這樣做這

<div class="toggle-wrap" ng-repeat="question in questions"> 
     <span class="trigger opened" ng-click="openContainer = !openContainer"><a href="#"><i class="toggle-icon"></i>{{question.title}}</a></span> 
     <div class="toggle-container" ng-show="openContainer"> 
      <p>{{question.text}}</p> 
     </div> 
</div> 

刪除，可能影響這個任何的CSS，或者如果你想堅持的CSS類來回切換路線，你知道如何將這些類別切換打開和關閉，你可以用同樣的方法，除了改變

這

<div class="toggle-container" ng-show="openContainer"> 

這個

<div class="toggle-container" ng-class="{ 'yourToggleClass' : openContainer}"> 

只是您使用打開/關閉任何類替代「yourToggleClass」。

Answer 2

代替所有的jQuery，使用ng-class指令來切換基於變量值的元素類。

https://docs.angularjs.org/api/ng/directive/ngClass

對於隱藏/顯示元件，使用納克 - 如果和vairable值。 https://docs.angularjs.org/api/ng/directive/ngIf