AngularJS not selecting the user-selection in a select box

Question

I hope you guys are doing very good in your life. I am trying to make a select box with a default selection and allowing user to change the selection if they want.

Here is the JSFiddle: https://jsfiddle.net/ibnyusrat/jf5gggj0/

I am using this line to write the select box and its options:

<select name="defaultQuality" ng-model="CreatePlayer.form.defaultQuality" ng-options="item.quality as item.label for item in CreatePlayer.getQualities() track by item.quality">
     <option style="display:none" value="">Select a quality</option>
</select>

And the function that produces the options is:

CreatePlayer.getQualities = function(){
    var c = Array();
    c[0] = {quality:"SD",label:"SD"};
    if(CreatePlayer.form.p1080){
      c[1]={quality:"HD",label:"HD"}
    }
    return c;
 }

If I remove this line:

 CreatePlayer.form.defaultQuality = {quality:"SD",label:"SD"};

It does seem to work. The issue is, if I don't define a default option, the select works as it should. But the moment I define a default option, and then I programmatically add an option to the list, changing selection causes the select box to revert to the empty value for the firs time, but in all the following times it works. So the user actually has to select the option twice to get it to recognize it.

Am I making a very obvious mistake here? Please help.

@AlonEitan As it can be tested on the JSFiddle, removing the track by option results in not having a default selection, which is what I already wrote that the script does seem to work without a default option. — Muhammad bin Yusrat
– Muhammad bin Yusrat, Commented Apr 2, 2017 at 18:04
Its perfect, how did you do that? Please post an answer and I will select it as the answer, and please also provide some details of how you did that? — Muhammad bin Yusrat
– Muhammad bin Yusrat, Commented Apr 3, 2017 at 7:06

Alon Eitan · Accepted Answer · 2017-04-03 09:55:26Z

1

Ok, so first thing first - This is a working solution: https://jsfiddle.net/jf5gggj0/1/

The first thing I did is to change CreatePlayer.getQualities from a function into an array. Why? Because it's much better performances-wise - Instead of calling this function on every digest cycle (Which happens a lot), Angular can now just track changes on the object.

Before:

CreatePlayer.getQualities = function(){
    var c = Array();
    c[0] = {quality:"SD",label:"SD"};
    if(CreatePlayer.form.p1080){
      c[1]={quality:"HD",label:"HD"}
    }
    return c;
}

After:

CreatePlayer.getQualities = [{quality:"SD",label:"SD"}];

Next thing I did was to add ng-change="CreatePlayer.enableHD()" on the checkbox, which call the following function when you check/uncheck it:

CreatePlayer.enableHD = function() {
    if(CreatePlayer.form.p1080){
        CreatePlayer.getQualities.push({quality:"HD",label:"HD"});
      return;
    }
    var a =  CreatePlayer.getQualities.map(function(e) { return e.quality; }).indexOf('HD');
    if( a !== -1 ) {
        CreatePlayer.getQualities.splice(a, 1);
    }
};

What this function does is that it check if the box is checked (if(CreatePlayer.form.p1080){ ... }), and if it does, it adds the HD option to the select options, otherwise, it removes it:

var a =  CreatePlayer.getQualities.map(
   // return an array of the "quality" values, and keeps the same indexes as the original "getQualities" array
   function(e) { return e.quality; }
).indexOf('HD'); // Return the position of "HD" in order to remove it from the original "getQualities" array

And then I use the a (Which holds the position of "HD") variable to remove the element from the array: CreatePlayer.getQualities.splice(a, 1);

The last thing was to change the ngOptions expression.

Before:

ng-options="item.quality as item.label for item in CreatePlayer.getQualities() track by item.quality"

After:

ng-options="item as item.label for item in CreatePlayer.getQualities"

I removed the track by item.quality because the ngModel of the select is referencing to an element inside the CreatePlayer.getQualities array in the controller: CreatePlayer.form.defaultQuality = CreatePlayer.getQualities[0]; so now Angular manage the binding of the select value for you, and that's why it's not getting reset avery time you change the elements inside the getQualities array.

Well, that's about it :)

But just remember - Avoid as much as possible binding functions to the view, only bind members of the scope (properties/objects).

edited Apr 3, 2017 at 9:55

answered Apr 3, 2017 at 9:34

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Muhammad bin Yusrat Over a year ago

One word: Brilliant! Thank you so very much for taking the time you took and for all the discomfort this might have caused. Thank you once again! :)

Alon Eitan Over a year ago

It was my pleasure :) Thanks for accepting my answer

Muhammad bin Yusrat Over a year ago

One issue though.. previously, the value in CreatePlayer.form.defaultQuality used to be either SD or HD and so I was testing against these values in the PHP, now, the value of the select is the entire object, like {"quality":"SD","label":"SD"}. (jsfiddle.net/jf5gggj0/2) Do you think I can write it so it gives the value like it previously did?

Alon Eitan Over a year ago

It was because I changed item.quality as item.label to item as item.label (I personally prefer to work with the actual object). Don't forget to change CreatePlayer.form.defaultQuality = CreatePlayer.getQualities[0]; to CreatePlayer.form.defaultQuality = CreatePlayer.getQualities[0].quality; as I did in the fiddle in my last comment (You can also cahnge it to CreatePlayer.form.defaultQuality = 'SD'; if you prefer)

Alon Eitan Over a year ago

@MuhammadbinYusrat Not sure why do you need it via PHP (Aince Angular should be a pure js SPA), but try this: jsfiddle.net/jf5gggj0/4 - And angular add this "string" thing because it helps it to determine the type of the value (String/Number/Object) - This is something internal that angular add by itself

|

Collectives™ on Stack Overflow

AngularJS not selecting the user-selection in a select box

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related