Ng-change is triggering before changing ng-model

ionic-v1
1

I am having a problem with ion-radio.

Check this codepen and see the console.
on ion-radio ng-change triggered before ng-model. This is wired.

Anyone having same problem ?

I have created a simple radio button above ion-radio, which works fine.

2

Not sure what the issue seems to be.

3

I guess it is some problem with scope of ion-radio. I am really new, bare me.

4

I believe I have just run into this same issue.

The ng-change expression (a function in my case) is being called before the ng-model is changed on the scope.

@mhartington It seems your code pen shows this behavior as well. When changing the value using the radio inputs, the newly selected value is being logged. However when selecting using the ion-radio, the old value is being logged.

5

I have managed to work around this problem using this

<label ng-class="{'item-radio-selected':form.status === option.value}" class="item item-radio item-radio-label" ng-repeat="option in options">
					{{option.text}}
    <input name="radio-group" type="radio" ng-change="saveForm(form)" ng-model="form.status" ng-value="option.value" />
    <i class="icon disable-pointer-events ion-checkmark radio-icon"></i>
</label>

It requires some CSS though

6

@iampeterbanjo Your Code will work. The problem is with ion-radio directive.

They have resolved the issue. See this https://github.com/driftyco/ionic/issues/1741#issuecomment-48696590

I may be working in nightly. I haven’t checked it yet.

7

See this buddy https://github.com/driftyco/ionic/issues/1741#issuecomment-48696590

and switch to nightly builds.

8

I have updated the codepen example to use the nightly builds and the bug is still there. I have also updated my app with the nightly builds and I am still having this issue

9

Thanks for the link, I had forgotten to check the github repo issues for more info.

Unfortunately it seems the issue is still present in the nightly build as @iampeterbanjo pointed out.

For anyone looking for a workaround, I’ve temporarily moved over to using $scope.$watch on the ng-model expression.

1 Like
10

Thanks for the recommendation! I’ve been running into the same issue.

11

How have you been using $scope.$watch?

I have set up a watch on an ion-toggle’s ng-model and it is only triggered when the page is loaded because on each page load I refresh the watched variable from persistent data. It does not fire my callback on subsequent toggle clicks.

12

Ah, I’ve setup the $scope.$watch on a ng-model used in an ion-radio. I added one to the ion-toggle example codepen and saw the same behavior you mentioned.

Not sure what the best workaround for the ion-toggle would be in this case.

1 Like
13

Dang. This is a pretty big issue. Toggles effectively can’t be used for anything persistent. :frowning:

14

Hey guys, thanks for looking into this. Also, thanks @ms1752, totally missed that :smile:

Yeah, it still seems to be broken right now, I’ve reopened the issue

15

Hey there, I stumbled across this bug too. I found an interesting behaviour, as you will see here: http://codepen.io/anon/pen/upzCK.

It looks like you can succesfully $watch the model attached to a ion-toggle if the changing value is an object (eg.: ng-model=“pushNotification.checked”) but it won’t work if the model is a direct value attached to $scope (eg.: ng-model=“emailNotification”).

I hope this will help.

Ciao!

17

I’ve found that this still is not working when using ion-toggle. The ng-model variable is not updating correctly.

18

unbelievable, but this seems still to be the case in Ionic 1.2 released Dec 2015 … has this maybe been a decision made on purpose ($watch performance?).

using an objec’s properties instead of just a $scope variable (calc.Input instead of calcInput) still works.