Select doesn´t recognise ng-change

Question

I have a "select" using ng-options. It has 4 "periods". After an event is triggered, this happens:

if ($scope.periods.length <= 4) {
  $scope.periods.push({
    IdPeriod: 6,
    Description: "PERSONALIZADA"
  });
}

setTimeout(() => {
  sel.options[sel.options.length - 1].selected = true;
}, 100);

I'm creating a new option, that shouldn't be showed from start. After it, with a short timeout (sel.options[5] seems undefined inmediatly after creating it), I'm selecting it to be showed in the "select".

The thing is that, if I trigger the event that creates that option, and re-select the option that was selected before creating the new one, it won't call the method assigned to ng-change.

Yes, the thing is that project was already done even before I got hired lol. This is just a feature add. — Nacho Gonzalez Ampudia, Feb 04 '20 at 14:50
@beanic typescript is a superset of javascript...sugarcoating so to say. How would you write an `if` statement in typescript? — Michelangelo, Feb 04 '20 at 14:50
@Michelangelo obviously I didn't say that for the if statement. But is very annoying see how people doesn't follow the rules of Angular documentation. — beanic, Feb 04 '20 at 14:54
It does not trigger because you didn't `change` anything if you select the exact same option after running your code. I think you are looking for the `(click)` trigger. — Michelangelo, Feb 04 '20 at 14:56
@beanic This seems to be angularJs project, which was mostly used in JS. Its not angular which enforces user to use `typescript` — Shashank Vivek, Feb 04 '20 at 14:57
@NachoGonzalezAmpudia: Would you mind creating a demo code on https://plnkr.co/ and let me know in the comment section. I'll try to fix that — Shashank Vivek, Feb 04 '20 at 14:58
I suppouse you use `ng-model`, so simply give value to the variable, not use selected — Eliseo, Feb 04 '20 at 15:11
@Michelangelo, I'm selecting the option selected before selecting "personalizada" by code. If I assign the method now on ng-change to ng-click, it will trigger rigth after clicking the input, before selecting an option. — Nacho Gonzalez Ampudia, Feb 04 '20 at 15:14
@NachoGonzalezAmpudia I don't understand what you are trying to do. You literally say that it does not work after creating a new option and you click the option you already clicked. When you click twice the same option it won't detect change, because there is no change. Change will trigger when you change from one to another select option. I suggested you share all of your code also the HTML otherwise we can't understand what you are trying to do and please make small demo on https://jsfiddle.net or similar site. — Michelangelo, Feb 04 '20 at 15:28
When you create new option, it selects automatically. If you select the option selected before it, won't call ng-change method. The thing is that both ng-change and the event that adds an option, make a search and update results. So, with updated results after adding new option, if you want to re-select first option to see those results, it just won't update — Nacho Gonzalez Ampudia, Feb 05 '20 at 13:28

score 1 · Answer 1 · answered Feb 04 '20 at 16:28

ERRONEOUS

setTimeout(() => {
  sel.options[sel.options.length - 1].selected = true;
}, 100);

BETTER

$timeout(() => {
  sel.options[sel.options.length - 1].selected = true;
}, 100);

Events from setTimeout are not integrated with the AngularJS framework.

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

For more information, see

AngularJS $timeout Service API Reference

Select doesn´t recognise ng-change

1 Answers1