How to call event from checkbox element only if checkbox is checked

Question

Here is my rows code:

angular.module('myApp', [])
    .controller('Ctrl', ['$scope', function($scope) {       
       $scope.foo = function() {
         alert("bla bla bla");
       };
    }]);

#rollDiv {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#rollDiv label span { 
    padding:5px 5px 2px 2px;
    display:block;
}

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">

<label>
<input type='checkbox' ng-click='foo()' hidden><span class=" glyphicon glyphicon-list-alt"></span>
</label>

</div>

At the example above foo event is fired when element checked and unchecked, can I make a call of the event from checkbox element only if checkbox is checked and event not called if I uncheck element.I don't feel like making any changes in controller.

Charlie · Accepted Answer · 2015-10-23 14:42:28Z

2

Here is what you are looking for.

<input type='checkbox' ng-model='chkMonitor'  ng-click='chkMonitor && foo()'>

chkMonitor is just a simple scope variable.

Explanation:

foo() function can be conditionally executed by placing it in a boolean expression. The following ...

ng-click='false && foo()'

will never execute the function. So, the task is to replace false with a variable which represent the check state. We can use $event.target.checked - but DOM referencing in angular expression is prohibited.

Solution is to bind a scope variable with the check box and use it with foo()

Of course there are conventional methods which can filter out clicks inside the foo() function. But your question was about NOT firing foo() if not checked.

answered Oct 23, 2015 at 14:42

Charlie

24k12 gold badges65 silver badges96 bronze badges

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

1 Comment

Gavin Over a year ago

I swapped ng-click to ng-change as a bit more robust, catching more scenarios.

Emir Marques · Accepted Answer · 2015-10-23 14:44:02Z

Look this:

angular.module('myApp', [])
  .controller('Ctrl', ['$scope',
    function($scope) {
      $scope.foo = function() {
        console.log("bla bla bla");
      };
    }
  ]);

#rollDiv {
  margin: 4px;
  background-color: #EFEFEF;
  border-radius: 4px;
  border: 1px solid #D0D0D0;
  overflow: auto;
  float: left;
}
#rollDiv label span {
  padding: 5px 5px 2px 2px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="myApp" ng-controller="Ctrl">

  <label>
    <input type='checkbox' ng-model="cbxTest" ng-click='read?"":foo();read=true' hidden><span class=" glyphicon glyphicon-list-alt"></span>
  </label>

</div>

Collectives™ on Stack Overflow

How to call event from checkbox element only if checkbox is checked

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related