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

Question

repeat I cant run a href=# so I cant run javascript function. a.click will open to toogle text or a.click will close to toogle text.

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:

        <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>

Yow. That's a lot of jQuery in an AngularJS app. Please read this: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — isherwood, Jun 23 '15 at 15:31
Also, Jscript != JavaScript. Please don't abbreviate randomly. — isherwood, Jun 23 '15 at 15:32

score 2 · Accepted Answer · answered Jun 23 '15 at 15:46

Probably best not to use jquery for this, just use angular, you have a repeat so you can do something like this

 <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>

Remove any css that might effect this, or if you want to stick with the css class toggling route and you know how these classes toggle open and close you can use the same method, except change

this

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

to this

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

just replacing 'yourToggleClass' with whatever classes you are using to open/close.

score 0 · Answer 2 · answered Jun 23 '15 at 15:48

Instead of all the jQuery, use ng-class directive to toggle the classes of elements based on variable values.

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

For hiding/showing elements, use ng-if and vairable values. https://docs.angularjs.org/api/ng/directive/ngIf

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

2 Answers2