Dynamically change checkboxes with Angularjs

Question

I have the following checkbox:

input(type='checkbox', ng-model='auto', ng-checked='auto', ng-change='save()')

As soon as I save it from the method in ng-change it save the auto value correctly but the app also listen to SSE (Server Sent Events) to update that value:

A simple example:

$scope.$watch(Auto.getNewValue, function (newAutoValue) {
    if (newAutoValue !== null) {
        $scope.auto = newAutoValue;
    }
});

Even if from the $watch the value is false but previously I checked it the checkbox remains checked. How can I uncheck that checkbox with AngularJS?

So when you check it, you want it to uncheck after the save? — Jhey
– Jhey, Commented Sep 4, 2015 at 13:25
No, only if the value from SSE return false I wish to uncheck it, same if it return true and the checkbox is not checked... I wish it to be checked... — Ayeye Brazo
– Ayeye Brazo, Commented Sep 4, 2015 at 13:26
I may be having a moment but what is SSE? Is this one of your services that you are calling from within the save function? — Jhey
– Jhey, Commented Sep 4, 2015 at 13:29
SSE are Server Sent Events... Real time updates coming from API in my case. SSE send messages to the client allowing me to update values in real time similar to web sockets. — Ayeye Brazo
– Ayeye Brazo, Commented Sep 4, 2015 at 13:32
Ah right yes of course. Hmm. How are you hooking this into angular though? If using a data stream or sockets are you updating a controller variable in the callback of said stream? — Jhey
– Jhey, Commented Sep 4, 2015 at 13:37

Ayeye Brazo · Accepted Answer · 2015-09-04 21:23:12Z

1

I solved it just adding a few more ng attributes to my input checkbox. It look like this now:

input(type='checkbox', ng-model='auto', ng-true-value='true', ng-false-value='false', ng-checked='auto', ng-change='save()')

ng-true-value and ng-false-value solved my issue.

Now everything is working fine... (even if I still don't know why... lol)

answered Sep 4, 2015 at 21:23

Ayeye Brazo

3,4969 gold badges41 silver badges76 bronze badges

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

1 Comment

Naveen Over a year ago

this actually works fine for me too. I tried adding ng-checked and ng-model and tried to do all manipulations. <input type="checkbox" ng-model="schedule_active" ng-true-value='true' ng-false-value='false' class="checkbox" id="schedule_active"/>

Naveen · Accepted Answer · 2016-01-12 08:29:28Z

1

try below checkbox

<input type="checkbox" ng-model="yourmodel" ng-true-value='true' ng-false-value='false' class="checkbox" id="schedule_active"/>

as answer is already provided, just to have quick copy paste for others, I've added above code.

answered Jan 12, 2016 at 8:29

Naveen

83010 silver badges19 bronze badges

Comments

Jesse · Accepted Answer · 2015-09-04 13:39:28Z

0

from https://docs.angularjs.org/api/ng/directive/ngChecked:

Sets the checked attribute on the element, if the expression inside ngChecked is truthy.

Ng checked can take an expression. So maybe create a function that returns false from whatever events you need to take place?

input(type='checkbox', ng-model='auto', ng-checked='checkedFunction()', ng-change='save()')

and then your function

function checkedFunction()
{
   //do stuff
   return false;
}

answered Sep 4, 2015 at 13:39

Jesse

1,2621 gold badge9 silver badges19 bronze badges

1 Comment

Ayeye Brazo Over a year ago

Nothing, it doesn't remove the checked value from the checkbox.

Collectives™ on Stack Overflow

Dynamically change checkboxes with Angularjs

3 Answers 3

1 Comment

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Related