Trigger the click event on an element if a condition is true in Angular js

Question

I have an Angular js view.html page where I am passing a string called datadict from the $scope method of the controller.
Value {{ datadict.days }} is displaying value Nearly everyday and {{ datadict.days.includes('Nearly everyday') }} is showing result true.

Here is my code :

 <div class="some_class">
  <ul class="ex1">
    <li><a ng-click ="datadict.days.includes('Not applicable')" class="mdcl-tab1">Not applicable</a> </li>
    <li><a ng-click ="datadict.days.includes('Several Days')" class="mdcl-tab1">Several Days</a> </li>
    <li><a ng-click ="datadict.days.includes('More than half the days')" class="mdcl-tab1">More than half the days</a> </li>
    <li><a ng-click ="datadict.days.includes('Nearly everyday')" class="mdcl-tab1">Nearly everyday</a> </li>
  </ul>
</div>

And when an element gets clicked, the event is handled by this function :

<script>
$(document).ready(function () {

    $(".mdcl-tab1").on('click',function(){

        $(this).addClass('tick');
        $('.ex1').attr('id', 'ex1');

    });

});

</script>

The problem is I want to trigger the click event on that <a> element for which the above condition is true that's why I added this condition ng-click ="datadict.days.includes('Nearly everyday')" but I am not getting the desired result. What am I doing wrong ?

What are you trying to achieve? You want to trigger the "click" event when the condition becomes true? Or do you want to enable the "click" event in that case? — KWeiss
– KWeiss, Commented Nov 10, 2016 at 7:34
what do yo mean by trigger the click event on condition true? do you mean trigger as in element.click() or do you want execute some method when the condition is true? — Sreekanth
– Sreekanth, Commented Nov 10, 2016 at 7:52
does these anchor tags have a click handler bound else where? they are definitely not bound in angular, I suppose. Its really hard to solve the problem, when we dont understand the context. — Sreekanth
– Sreekanth, Commented Nov 10, 2016 at 8:26
Possible duplicate of How to trigger ng-click [AngularJS] programmatically — Daedalus
– Daedalus, Commented Nov 18, 2016 at 6:42

GraveyardQueen · Accepted Answer · 2016-11-10 08:57:16Z

3

You can do something like this,

<script>
$(document).ready(function () {
$(".mdcl-tab1").on('click',function(){

    $(this).addClass('tick');
    $('.ex1').attr('id', 'ex1');

});

if($scope.datadict.days.includes('Nearly everyday')){
$(".mdcl-tab1").trigger("click");
}
});

and remove the ng-click attribute from the anchor tag

<a class="mdcl-tab1">

answered Nov 10, 2016 at 8:57

GraveyardQueen

7691 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prakhar Trivedi Over a year ago

Sorry,Not what I am looking for. $(".mdcl-tab1").trigger("click"); will trigger click for all <a> elements.I need that specific element for which the condition is true. Almost there,so the upvote.

GraveyardQueen Over a year ago

You could either change the class name for each anchor tag to differentiate between them or you could add an id attribute to each anchor tag and use the id as the selector and trigger the click event for each of the anchor tags

Zulian Rizki · Accepted Answer · 2016-11-10 07:42:43Z

2

i think you can do something like this

<li><a ng-click ="datadict.days == 'Nearly Everyday' && someFunction()" class="mdcl-tab1">Not applicable</a> </li>

then if you click that ,someFunction() will only run if datadict.days is equal to 'Nearly Everyday'

answered Nov 10, 2016 at 7:42

Zulian Rizki

311 bronze badge

2 Comments

Prakhar Trivedi Over a year ago

Zulian,I don't want to check the condition after I click on the element,I want to trigger click on this element if a condition is true.

Zulian Rizki Over a year ago

Well you cant trigger the click.. But you can call a function like if(true) { someFunc() }

Collectives™ on Stack Overflow

Trigger the click event on an element if a condition is true in Angular js

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related