CODEWITHSUNDEEP
javascriptjqueryangularjs
Imo
Imo

Reputation: 1475

Execute if function if checkbox is checked angular.js

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");
                }

        };
}

Upvotes: 2

Views: 1635

Answers (3)

amighty
amighty

Reputation: 784

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;
                }           
    };   
}]);

Upvotes: 1

Naga Sandeep
Naga Sandeep

Reputation: 1431

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.

Upvotes: 1

Omri Aharon
Omri Aharon

Reputation: 17064

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.

Upvotes: 5

Related Questions