Angular How to check checkbox with click on div

Question

I need to check/unchec checkbox with click on div "user check" and call doIfChecked(user).

I can check checkbox in ng-repeat and call doIfChecked.

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

app.controller('cont', ['$scope', function($scope) {
  
$scope.users = {user1:1,user2:2,user3:3};
  
$scope.toggleUserCo = function(user) {
    user.co = !user.co;
}


$scope.doIfChecked = function (array) {

}

}]);

.user_check {
width: 600px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


        <div class="user_check" ng-app="app" ng-controller="cont" >
          
<div class="user_check" ng-app="app" ng-click="toggleUserCo()" ng-repeat="us in users">
    <input type="checkbox" checklist-value="contact" checklist-model="user.co" ng-click="doIfChecked(user)"/>
</div>

Tom · Accepted Answer · 2015-04-21 16:49:04Z

2

Assuming user.co is some boolean value and checklist-model is the equivalent to ng-model in whatever directive you're using, you can set the ng-click on the div to set user.co = !user.co

For example:

<div class="user_check" ng-app="app" ng-click="toggleUserCo()">
    <input type="checkbox" checklist-value="contact" checklist-model="user.co" ng-click="doIfChecked(user)"/>
</div>

And in your controller (or, based on the fact that I don't see you having a controller defined inside of the ng-app, I guess this would go wherever you're putting your logic (which should be a controller or service...)):

$scope.toggleUserCo = function() {
    $scope.user.co = !$scope.user.co;
}

Edit

Since this is in an ng-repeat, you can just pass the user object to the toggleUserCo function and perform the operation on that:

<div class="user_check" ng-app="app" ng-click="toggleUserCo(user)">

And

$scope.toggleUserCo = function(user) {
    user.co = !user.co;
}

edited Apr 21, 2015 at 16:49

answered Apr 21, 2015 at 16:36

Tom

7,7401 gold badge26 silver badges49 bronze badges

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

3 Comments

trigger Over a year ago

thank you! but my block "user_check" in ng-repeat, and i have many blocks and checkboxes, sorry that forgot to wrote it.

trigger Over a year ago

i updated my code with your advice, but it not work.

Tom Over a year ago

See the markup in this jsBin. That should work. You're still not passing the user to the toggleUserCo function

Collectives™ on Stack Overflow

Angular How to check checkbox with click on div

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