Angularjs Select with group and initial value

Question

I have a form that includes a SELECT element. I load the possible values in my controller from a function that returns the data from a database. I want to group the options by a group name.

I have the list of options loading properly showing the grouping. My problem, is the initial value is not displaying - this is based on a data model. It shows as blank. If I choose any option in the list, it does properly display.

I followed the example from this solution Populate a Dropdown list by grouping using AngularJs

From the various other examples that I have seen, this should work...I'm guessing it is some little thing I accidentally overlooked.

This loads the possible values for the drop down:

    $http.get("api/getIndustry").success(function(data){
        $rootScope.industryData = [];
        $.each(data, function (i, data) {
            $rootScope.industryData.push({
                group: data.group,
                id: data.id, 
                text:  data.text
            });
        });                      
    });

For now, I am trying to initially set a selected value (eventually it will be set from reading a record):

    $scope.example3model = {group: 'Energy and Natural Resources', id: '25', text: 'Utilities'};

And this is a portion of my view.

<td colspan="4" ng-hide="editableForm.$visible">
    <select ng-model="example3model" class="form-control input-md" ng-options="industry.text group by industry.group for industry in industryData" >
    </select></br>
    {{example3model}}    <- did this to see what was chosen
</td>

I'm not sure what else to try to get this to work...the only problem I see right now is that the list is not showing the 'default' value of what is initially in example3model (so the list shows as blank). If I choose a value in the list it is displayed correctly.

Any suggestions would be greatly appreciated.

Does the $rootScope.industryData array contain the exact object you're setting as initial for $scope.example3model? I would either set the initial value looping the data array and pointing to the object reference there — GMaiolo
– GMaiolo, Commented Oct 11, 2017 at 16:59
yes, as far as I can tell it is in there exactly. At first, I did notice the id field wasn't in the same format but fixed that. The screen shows the value when the screen displays just not in the drop down as being selected. I chose the exact same option from the list and it displayed exactly the same. — user3861284
– user3861284, Commented Oct 11, 2017 at 17:37
Please try this: $scope.example3model = $rootScope.industryData.filter(function(data){ return +data.id === 25 })[0] and tell me if it works, we need to use the same referenced object in the array for the initial value — GMaiolo
– GMaiolo, Commented Oct 11, 2017 at 18:58
that works! hmmm...so I am guessing that means I am not setting the initial value properly, right? and although they look similar something is not quite right. — user3861284
– user3861284, Commented Oct 11, 2017 at 19:03
they both print out to the console as this: {group: "Energy and Natural Resources", id: "25", text: "Utilities"} {group: "Energy and Natural Resources", id: "25", text: "Utilities"} something is still making them not equal, but not sure what.. — user3861284
– user3861284, Commented Oct 11, 2017 at 19:26

GMaiolo · Accepted Answer · 2017-10-11 20:08:36Z

1

The problem is that you're trying to set the initial value to an object literal, and even though it may look the same as one inside the select options it is not.

This happens because of how Javascript and AngularJS both work to set that initial object-value (note that this wouldn't happen if options was an array of primitives such as numbers and strings): {} and {} look the same from a human perspective, but they're clearly not the same in JS, try doing this in the browser console:

{} == {}
// this will be false
{ a: 1 } == { a: 1 }
// this will be false as well

Now, what Angular does behind the scenes is checking if the ngModel matches any reference inside ngOptions, that's why we need to set the initial value specifically referenced from the options array.

The initialization, in your example, must be something like this in the specific case you provided (note that I'll be hard-coding the id to match the needs of your post, but you could change it to match whatever you need)

const defaultId = 25;
$scope.example3model = $rootScope.industryData.find(data => +data.id === defaultId)

Now the ngModel value is pointing to the referenced array object that we want.

* Take a look at the official documentation about complex models for ngOptions

[note that this will not work if none of the objects in the ngOptions array has that defaulted id as it will not match any of them]

edited Oct 11, 2017 at 20:08

answered Oct 11, 2017 at 19:39

GMaiolo

4,6681 gold badge26 silver badges39 bronze badges

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

1 Comment

user3861284 Over a year ago

Thank you so very much! I think I will be able to work with what you provided in order to do the lookup and assignment as you suggested. Quite frustrating - was driving me nuts :)

Collectives™ on Stack Overflow

Angularjs Select with group and initial value

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related