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.

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.

• javascript
• jquery
• html
• angularjs

1 Answer 1

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()" />