Angular setting up ng-click on row but checkbox not working as desired

Question

I have defined a simple row that has a name and a checkbox. I have the name and the checkbox bound to angular data, but I am now attempting to put in a row click that will reverse the value of the checkbox bound data, and still allow user to click the check box

this is my html

<div class="container" ng-controller="officeController" ng-cloak>
    <div class="row" ng-repeat="employee in office" ng-click="toggleStatus(employee)">
        <div class="col-md-1">
            <img ng-src="{{employee.imageUrl}}" style="width: 50px; height: 50px;"/>
        </div>
        <div class="col-md-7" ng-click="alert('hello')">
            {{employee.name}}
        </div>
        <div class="col-md-4">
        <input type="checkbox" ng-model="employee.inOffice" ng-click="toggleCheckbox($event)"/>
        </div>
    </div>
</div>

and this is my controller

officeModule.controller("officeController", function ($scope, officeRepository) {
    $scope.office = officeRepository.get(),
    $scope.toggleStatus = function (employee) {
        console.log('onClick' + new Date());
        console.log('Original: ' +employee.id + ', "' + employee.name + '", ' + employee.inOffice);
        employee.inOffice = !employee.inOffice;
        console.log('Modified: ' + employee.id + ', "' + employee.name + '", ' + employee.inOffice);
    };
    $.toggleCheckbox = function($event) {
        $event.stopPropagation();
    }
});

The employee object is data returned from a simple api call ( the officeRepository on the controller )

I have tried only having ng-checked on the checkbox, but I cant seem to get everything to work the way I want it

What am I doing wrong?

Update

If I click the row, then the status of the checkbox is reversed correctly. However if I click the checkbox directly, then nothing happens. I had originally started out with only the following code on the input item

<input type="checkbox" ng-checked="{{employee.inOffice}}" />

But this would not update the checkbox when clicked on the div

Hadi · Accepted Answer · 2016-02-28 17:35:41Z

1

edit this

  $.toggleCheckbox = function($event) {
    $event.stopPropagation();
}

to

 $scope.toggleCheckbox = function($event) {
  var checkbox = $event.target;
  if(checkbox.checked)
    //
  else
     //

    $event.stopPropagation();
}

answered Feb 28, 2016 at 17:35

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

Collectives™ on Stack Overflow

Angular setting up ng-click on row but checkbox not working as desired

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related