Execute if function if checkbox is checked angular.js

Question

How can I execute a function when a check box is checked in angular js. I have seen a few answers on stack overflow regarding this but I cannot seem to implement them on my scenario

my code:

<div ng-controller="MyCtrl">
 <div class="checkbox">
        <label>
        <input type="checkbox" ng-model="thirtyDay" ng-click="changeAxis()">
        Last 30 Days
        </label>
         </div>
         <div class="checkbox">
        <label>
        <input type="checkbox" ng-model="wholeTimeline" ng-click="changeAxis()">
        Whole Timeline
        </label>
         </div>
</div>

js.

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
   function changeAxis(){
          if ($scope.thirtyDay) {
                    alert("checked 30");
                }
          else if($scope.wholeTimeline) {
                    alert("checked whole");
                }

        };
}

Omri Aharon · Accepted Answer · 2016-02-17 15:57:24Z

5

You need to place the function on the $scope, so the view will recognize it:

$scope.changeAxis = function() {
      if (!$scope.thirtyDay) {
           alert("checked 30");
      }
      else if(!$scope.wholeTimeline) {
           alert("checked whole");
      }
 };

Another thing to notice is that when entering the function you'll get the value of the model from before the push. So if you click and it's checked, the value will still be false (hasn't been updated yet). So either use !$scope.thirtyDay or place in a $timeout.

EDIT: As Mike correctly mentioned in his comment, you would probably be better of using ng-change instead of ng-click (this way the other property won't trigger as well when interacting with the other one). I would also join the recommendation and suggest considering a different function for different properties, but I'm not sure exactly to which use you're doing this.

edited Feb 17, 2016 at 15:57

answered Feb 17, 2016 at 15:47

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

4 Comments

Mike Robinson Over a year ago

Your $timeout comment highlights an issue with his implementation. It would be better to use ng-change over ng-click.

Omri Aharon Over a year ago

@MikeRobinson I agree. Personally I probably would have used two different functions as well.

Imo Over a year ago

@OmriAharon: Thank you for the help. Could you explain a bit further what do you mean by a different function for different properties

Omri Aharon Over a year ago

Yes, I imagine each checkbox does something else when triggered, so maybe you want to invoke a different function for each click, and not call changeAxis for each one. But that totally depends on what you're implementing.

amighty · Accepted Answer · 2016-02-17 17:06:56Z

1

Here is working demo

HTML

<div ng-app="myApp">
<div ng-controller="myCtrl" >
 <div class="checkbox">
        <label>
        <input type="checkbox" ng-model="thirtyDay" ng-change="changeAxis1()">
        Last 30 Days
        </label>
         </div>
         <div class="checkbox">
        <label>
        <input type="checkbox" ng-model="wholeTimeline" ng-change="changeAxis2()">
        Whole Timeline
        </label>
         </div>
</div>
</div>

JS

var app = angular.module('myApp', []);
app.controller('myCtrl',['$scope', function($scope) {        
    $scope.changeAxis1 = function() {                   
            if ($scope.thirtyDay) {
                    alert("checked 30");
                    $scope.wholeTimeline = false;
                }                
    };   
     $scope.changeAxis2 = function() {                  
            if($scope.wholeTimeline) {
                    alert("checked whole");
                    $scope.thirtyDay = false;
                }           
    };   
}]);

edited Feb 17, 2016 at 17:06

answered Feb 17, 2016 at 16:54

amighty

7844 silver badges12 bronze badges

2 Comments

Imo Over a year ago

Thanks is there a way to uncheck the other one while one is checked?

amighty Over a year ago

Yes, Just define two function and update the model values. I have updated the demo. Please check.

Naga Sandeep · Accepted Answer · 2016-02-17 16:01:15Z

1

You need to add controller to myApp with this line.

myApp.controller('MyCtrl', MyCtrl);

You need to link changeAxis function to scope

$scope.changeAxis = changeAxis;

So your app.js will be something like

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', MyCtrl);

function MyCtrl($scope) {
   function changeAxis(){
          if ($scope.thirtyDay) {
                    alert("checked 30");
                }
          else if($scope.wholeTimeline) {
                    alert("checked whole");
                }

        };
        $scope.changeAxis = changeAxis;
}

I hope you have added ng-app to your html. Also please consider the ngChange suggestion mentioned in the other answer.

answered Feb 17, 2016 at 16:01

Naga Sandeep

1,4312 gold badges13 silver badges26 bronze badges

Collectives™ on Stack Overflow

Execute if function if checkbox is checked angular.js

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related