[Angular] Sometimes ng-change fires, sometimes it doesn't

[Dan Stromberg]

Hello people.

I'm trying to convert two radio-buttons to a single checkbox (with some 
vestiges of pure CSS checkbox I suspect), and am having difficulty that I'm 
thinking is due to my lack of familiarity with CSS.

In short, sometimes when I click the checkbox, it runs my ng-change, and 
sometimes it doesn't, and I don't know why.

Here's the relevant part of my HTML:
<div ng-if="!vm.updatingStatus" class="onoffswitch 
onoffswitch-build-preserve">
    <input type="checkbox" id="onoffswitch-build-preserve" 
name="onoffswitch-build-preserve" class="onoffswitch-checkbox"
        ng-model="build.preserved"
        ng-change="vm.preservation_toggle()"
    >
    <label class="onoffswitch-label" for="onoffswitch-build-preserve">
        <span class="onoffswitch-inner 
onoffswitch-inner-build-preserve"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>

And here is what I think is the relevant part of my CSS (sorry for its 
size) :
.onoffswitch {
    position: relative;
    width: 64px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
}
.onoffswitch-inner-build-preserve:before { content: "Preserved"; }
.onoffswitch-inner-build-preserve:after { content: "Not Preserved"; }
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 22px;
    padding: 0;
    line-height: 22px;
    font-size: 14px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}
.onoffswitch-inner:before {
    content: "Off";
    padding-left: 9px;
    background-color: #7B1315; color: #F5E4E4;
}
.onoffswitch-inner:after {
    content: "On";
    padding-right: 9px;
    background-color: #0A5B28; color: #FFFFFF;
    text-align: right;
}
onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #999999;
    border-radius: 15px;
}
.onoffswitch-switch {
    display: block;
    width: 20px;
    margin: 1px;
    background: #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 38px;
    border: 2px solid #999999;
    border-radius: 15px;
    transition: all 0.3s ease-in 0s;
}

I'm sometimes changing the state of the button from Javascript, using:
function sendCheckboxClick(which, set_to) {
    let checkbox_button = document.getElementById(which);
    let bool_checkbox_button = !! set_to;
    console.log(`fred 5: Setting checkbox button to 
${bool_checkbox_button}`);
    checkbox_button.checked = bool_checkbox_button;
}

I'm using AngularJS 1.5.8.  I know, it's old.

Any suggestions?

Thanks!






-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/angular/b019d9a9-651c-419e-a033-901618235691n%40googlegroups.com.