Angular checkbox input ng-click never called

Question

In my Angular app, I have a form with checkbox inputs:

<div ng-repeat="partner in type.partners">
    <label class="checkbox-inline">
        <input type="checkbox" value="partner"
        ng-checked="report.participatingPartners[$parent.$index].indexOf(partner) !== -1" 
        ng-click="toggleSelection($parent.$index, $index);">
        <p><span></span>{{partner.name}}<p>
    </label>
</div>

And in my controller, just to test this setup:

var vm = this;
vm.toggleSelection = toggleSelection;

...

function toggleSelection(typeId, partnerId) {
    console.log("toggleSelection called");
    console.log(typeId, partnerId);
}

This function never gets called when I click the checkbox or its label. Why is that?

I know it's not the controllerAs syntax because other functions are working fine.

If you are using controller as, aren't you missing the name of your controller before the function toggleSelection(...)? — Maxime Morin
– Maxime Morin, Commented Sep 28, 2015 at 9:47

Fridjon Gudjohnsen · Accepted Answer · 2015-09-26 10:16:31Z

2

The attribute you probably want to use is ng-change. The angular input directive does not have ng-clicked or ng-checked.

See docs.

answered Sep 26, 2015 at 10:16

Fridjon Gudjohnsen

8251 gold badge8 silver badges21 bronze badges

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

Comments

hally9k · Accepted Answer · 2015-09-27 04:59:20Z

1

By putting the function that you are trying to reference in the ng-click onto $scope rather than onto this the click event should bind as desired.

On the controller...

$scope.toggleSelection = toggleSelection;

 function toggleSelection(typeId, partnerId) {
    ...
}

On your html...

<input type="checkbox" value="partner"
    ng-click="toggleSelection($parent.$index, $index);">

Here is a simple Fiddle of it working.

edited Sep 27, 2015 at 4:59

answered Sep 26, 2015 at 22:47

hally9k

2,5932 gold badges29 silver badges51 bronze badges

2 Comments

Tiago Over a year ago

Why though? Shouldn't the 'this' syntax work exactly as scope?

hally9k Over a year ago

Because this refers to the controller object not the $scope object. These are two different things. $scope is the API that the controller exposes to the view. The view cannot access functions on the controller object. To clarify read this excellent answer stackoverflow.com/a/14168699

HaRdik Kaji · Accepted Answer · 2015-09-26 10:36:28Z

-1

You have written below code:

ng-checked="vm.toggleSelection($parent.$index, $index);"

But it should be:

ng-checked="toggleSelection($parent.$index, $index);"

Just remove "vm"

answered Sep 26, 2015 at 10:36

HaRdik Kaji

4252 silver badges11 bronze badges

3 Comments

Tiago Over a year ago

Sorry, but that was not it, that was actually a mistake on my copy-pasting.

HaRdik Kaji Over a year ago

@Tiago Please provide code on JS Fiddle or Plunker.

Kickaha Over a year ago

You say he wrote a line that he did not.. you done messed it up;).

Collectives™ on Stack Overflow

Angular checkbox input ng-click never called

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related