Strange behavior of ionic in select, ng-model won't update
I am experiencing something strange, this example works in the codepen but doesn't work in my Ionic app.
When I change the parameter in the select tag, I want to show the selected value, but it won't work, it shows undefined
, I tried in different ways.
This is not source code, the original one fetches values from external API and populates the options using ngOptions (which works, it populates fine). But it won't update the value in the controller.
So I decided to make it simpler and it still won't work:
Html
<select ng-model="optionSelected" ng-change="selectUpdated()">
<option value="">Select an option</option>
<option value="h">Hello</option>
<option value="b">Bye</option>
</select>
JAVASCRIPT
$scope.selectUpdated = function() {
console.log('Updated');
console.log($scope.optionSelected);
};
I don't think more code is needed, HTML is contained in ion-view
and ion-content
. No errors are displayed, only "Updated" output and undefined
.
When I change the parameter, I get undefined
. But the same code works fine in codepen .. http://codepen.io/anon/pen/YXvYmq
Can someone tell me what might be happening, what is causing this strange behavior?
Thanks in advance.
source to share
Found solution, pass ngModel property as parameter to ngChange.
Html
<select ng-model="optionSelected" ng-change="selectUpdated(optionSelected)">
<option value="">Select an option</option>
<option value="h">Hello</option>
<option value="b">Bye</option>
</select>
Js
$scope.selectUpdated = function(optionSelected) {
console.log('Updated');
console.log(optionSelected);
};
source to share
I had the same problem today and had to create a workaround for normal use.
Javascript
$scope.updatePreferredLanguageValue = function() {
$scope.PreferredLanguage = this.PreferredLanguage;
};
Html
<select ng-model="PreferredLanguage" ng-options="Language.id as Language.name for Language in LanguageList" id="LanguageListSelect" name="LanguageListSelect" ng-change="updatePreferredLanguageValue()">
</select>
So basically I have a method that gets called when a value changes, which makes sure the change is set in the $ scope variable. Not really, but it works.
source to share
Try using $ parent in your ng model and call it from your controller.
Example
<select ng-model="$parent.selectedCar">
<option>...</option>
</select>
Link: https://github.com/angular/angular.js/wiki/Understanding-Scopes
source to share