$event.target.value not returning as expected

Question

Referencing this, what I have should have worked:

<div ng-show="openGroup == group.id" ng-repeat="member in group.members">
    <ion-item class="item item-accordion item-toggle">
        <h3>{{ member.firstName }} {{ member.lastName }}</h3>
        <label ng-show="member.lead">Lead</label>
        <label class="toggle toggle-positive">
            <input ng-click="toggleClicked(member.id, $event.target.value)" type="checkbox">
            <div class="track">
                <div class="handle"></div>
            </div>
        </label>
    </ion-item>
</div>

When toggleClicked is called, I output the value of $event.target.value. It doesn't matter whether the checkbox is checked or not, the value that is output is always on. I would have thought that once the checkbox is unchecked, the value would be returned as off?

I attempted to create a plunkr for this but it didn't want to work even though the code is correct.

score 1 · Accepted Answer · answered Nov 16 '16 at 23:25

There's an issue with checkboxes and ngClick. This handy SO answer points out that using ngChange instead works, though you'll need to associate it with a model.

In index.html:

<input ng-change="toggleClicked(member.id, member.checked)" type="checkbox" ng-model="member.checked" />

Working plunkr

$event.target.value not returning as expected

1 Answers1