Select model not bind in ion content

ionic-v1
1

The problem occurs with the following ionic code:

<ion-content class="has-logo has-footer">
    <ion-item class='item-no-border'>
        <form>
            <span>{{prefGender.name}}</span>
            <!-- ng-select gender -->
            <select ng-model="prefGender" ng-options="gender.name for gender in preferences.gender">
            </select>

        </form>
    </ion-item>
</ion-content>

And the following is the controller data:

$scope.preferences = {gender: [ {selected: true, name : "Man", value: 1}, {selected: true, name : "Woman", value: 2} ]};
$scope.prefGender = $scope.preferences.gender[0];

When i select between option the ng-model ‘prefGender’ in the view work and {{prefGender.name}} change the value but inside the controller the ‘prefGender’ does not change and keep the initial value. The problem disappear when i remove all the ion tag (ion-view, ion-content, ion-item) in the html.

2

Could anyone help me to solve this problem,please?

3

Hey soo not sure what I should be looking at, seems to work for me.

What part isn’t working exactly? Your description seems a bit vague.

4

Yes it seem to work well from the view but inside the controller the model doesn’t change. You can check this http://codepen.io/ho_oh/pen/lrpeC . When click the check button the value keep the same.

So the problem is when access the model inside the controller it keeps the initial value, and it will work after remove the tag “ion-content”

5

Is there any way to fix it or tricks to overcome this problem? Please help me!

6

Hmm, I think its the way you have the select set up, take a look at this example.

Now the model updates correctly

7

I have found the trick to overcome this problem. Because the model change only in the view so i pass that changed value to controller through ng-change : http://codepen.io/ho_oh/pen/lrpeC .
But i pretty sure that there is some problem with the ionic directive, i think it is not two way binding in this case because without ‘ion-content’ tag it works correctly (no need ng-change).

8

Please help me. Now i have the reversed problem, i want to change the selected option from the controller but the view only change for the first time http://codepen.io/ho_oh/pen/lrpeC . And one a again, it works correctly when remove the ‘ion-content’ tag :frowning: . Is there any way to fix this problem completely?

9

Again, I think its the way you have yours set up.

10

I will try your way but i think my setup isn’t the problem because it is simple and follow exactly AngularJs instruction https://docs.angularjs.org/api/ng/directive/select . And i find out that not only the select menu but also other form elements get this issue, i also get this issue with the text input http://codepen.io/ho_oh/pen/ldEjg

11

Your solution just work with the simple model. In case of the more complex model it does not work http://codepen.io/ho_oh/pen/ijDzG

12

I’m sorry your code is not complex, but its a mess,…
I don’t know why you are using value prop as it seems you don’t use it anywhere.
First of all I don’t get the Check function as it checks a hard coded value prop that never changes,
you never set this $scope.prefGender.value the only thing that is changing is $scope.prefGender.gender so you should check that. Also I don’t get why are you even using values in the array as your ng-value attributes is using gender.name.

13

@ho_oh So I cleaned up mhartingtons example, how it should be, anyway you had issue with inherited scope this usually happens when there is another directive between your controller and select,input, etc. What you should usually do is declare variable inside another object so its more explicit.
Check the example: http://codepen.io/TheCodeDestroyer/pen/jnpLq

14

@mhartington

Select behavior seems to have changed in Ionic. I tried directives from angular without success.

Your old example on codepen doesn’t seem to work. Can you please update based on your availability?