JavaScript AngularJS call function in HTML

Question

I have a checkbox.

If checked -> call one function displayBus(number)

If unchecked -> call other function displayCar()

The problem with this code is that I have to click also in hide or show to call the function.

  <input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" />
        <div ng-show="mycheckbox">
             <a style="cursor: pointer;" ng-click="displayBus(number);">hide</a>

        </div>
        <div  ng-hide="mycheckbox">
            <a style="cursor: pointer;" ng-click="displayCar();">show</a>
        </div>

But I just want to check / Uncheck and then call automaticly the function. I DO NOT want to click on hide or show.

Thanks for your help.

Mathew Berg · Accepted Answer · 2014-10-29 13:33:30Z

7

You can wire up an ng-change to the checkbox and then check it's value:

<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" data-ng-change="dataChanged()" />

and then in your javascript:

$scope.dataChanged = function(){
    if($scope.mycheckbox){
        //checked
    }
    else{
        //not checked
    }
};

Edit:

If you want to do it only in html:

<a style="cursor: pointer;" ng-click="myCheckbox ? displayBus(number) : displayCar()">hide</a>

Edit:

<input type="checkbox" id="mycheckbox" name="mycheckbox" ng-model="mycheckbox" data-ng-change="myCheckbox ? displayBus(number) : displayCar()" />

edited Oct 29, 2014 at 13:33

answered Oct 29, 2014 at 12:55

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

3 Comments

Carlos Over a year ago

Thanks but better if it is not in JavaScript but HTML

Carlos Over a year ago

I need to have check/uncheck. Then it will execute displayBus(number) or displayCar()

Mathew Berg Over a year ago

Please describe your question a little better as I am confused on what you're trying to accomplish.

Collectives™ on Stack Overflow

JavaScript AngularJS call function in HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related