3

In my app I have some grouped select elements that all have the same options. When one select is changed, it checks the others to see if the new selected option has already been selected in any of the other selects. If it has already been selected, there is some logic to dynamically select an option that hasn't already been selected in the other selects. Sometimes, this logic leads to the same option being selected as before. When this happens, my select element is not updated, and it is out of synch with my model.

I've created a pretty simple jsFiddle that shows this here: http://jsfiddle.net/wvLHw/

Commented out in there is one possible workaround that I've found, but I don't know how possible it is to do in my app. Is there a better way to get this working right? Is there some reason why angular isn't updating the select element based on my model?

dnc253
  • 39,967
  • 41
  • 141
  • 157
  • Workaround can be done in [more angular way](http://jsfiddle.net/wvLHw/1/). – Artem Andreev Sep 06 '12 at 16:50
  • I'm hoping to not have to use the workaround (I have a lot more going on that makes this asynchronous assignment difficult), but that is definitely the right way of doing the workaround. – dnc253 Sep 06 '12 at 17:13
  • According to [this topic](http://stackoverflow.com/questions/12176925/angularjs-reset-of-scope-value-doesnt-change-value-in-template-random-behav) and statistic on similar issues I'm beginning to think that it is not workaround but one of the possible solution for issues with angular changes, rendering process and asynchronous events that as all JavaScript in a browser are executed on a single thread. – Artem Andreev Sep 07 '12 at 13:46
  • See [my explanation](http://stackoverflow.com/questions/12176925/angularjs-reset-of-scope-value-doesnt-change-value-in-template-random-behav/12331410#12331410) why it isn't work. – Artem Andreev Sep 08 '12 at 17:02

2 Answers2

1

This was an angularjs issue with version 1.0.2 that has been fixed in 1.0.3.

This should now work for you 

$scope.myOnChange = function() {
    //more logic here, but ends up back at c
    $scope.foo = "c";
}
testing123
  • 11,367
  • 10
  • 47
  • 61
0

I'm not sure if I'm interpreting your question correctly but I'm assuming that you've got several selects and when a value in one of those selects changes you want to execute some logic (based on other selects' values) that would eventually compute final value to be set.

IF the above is correct than using $scope.$watch would cover your use-case. For the sake of example let's assume that I've got 2 selects bound to 2 different model values (foo and bar). If someone changes value of foo and it is equal to what is selected for bar you would like to force foo to be something else. In such scenario this code would do the trick:

$scope.$watch('foo', function(fooValue){
    if (fooValue === $scope.bar){
        $scope.foo = 'a';
    }
});

Here is the complete jsFiddle: http://jsfiddle.net/pkozlowski_opensource/vqjKq/3/

I hope that I'm interpreting your use-case correctly but if not please comment on this answer, I will be happy to provide updates.

pkozlowski.opensource
  • 117,202
  • 60
  • 326
  • 286
  • I think you are understanding what I'm doing. With your jsFiddle, I set the first select to `c`, and then it changes it to `a` which is good and correct. However, I then change it to `c` again, and then it has the same problem I am describing. The select says `c`, but the `{{foo}}` says `a`. The issue is only when it gets set back to what it originally was. – dnc253 Sep 06 '12 at 18:07
  • Oh, I see now. Will play a bit with this jsFiddle and if I can't figure things out I will delete my answer. – pkozlowski.opensource Sep 06 '12 at 18:24
  • After debugging a bit through AngularJS I can see what is going on. Basically the view is not re-rendered since the model doesn't get updated (and the view is re-rendered only on model updates: https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L998). The only option I can see right now is to write a custom directive, a jsFiddle will follow shortly. – pkozlowski.opensource Sep 06 '12 at 20:32