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, Nov 10 '16 at 07: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, Nov 10 '16 at 07: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, Nov 10 '16 at 08:26
Possible duplicate of [How to trigger ng-click \[AngularJS\] programmatically](http://stackoverflow.com/questions/22447374/how-to-trigger-ng-click-angularjs-programmatically) — Daedalus, Nov 18 '16 at 06:42

score 3 · Accepted Answer · answered Nov 10 '16 at 08:57

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 '16 at 08:57

GraveyardQueen

771
1
7
17

Sorry,Not what I am looking for. $(".mdcl-tab1").trigger("click"); will trigger click for all elements.I need that specific element for which the condition is true. Almost there,so the upvote. – Prakhar Trivedi Nov 10 '16 at 11:16
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 – GraveyardQueen Nov 10 '16 at 11:33

score 2 · Answer 2 · answered Nov 10 '16 at 07:42

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 '16 at 07:42

Zulian Rizki

31
1

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. – Prakhar Trivedi Nov 10 '16 at 07:47
Well you cant trigger the click.. But you can call a function like if(true) { someFunc() } – Zulian Rizki Nov 10 '16 at 08:10

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

2 Answers2