Angularjs Binding Dropdown using ng-options

Question

I have looked at the angular documentation https://docs.angularjs.org/api/ng/directive/ngOptions but still can't figure this one out.

I have a list of sexes that get bound to a select like this:

            $scope.sexes = jQuery.grep(formData, function(a) {
                return (a.category == "Sex");
            });

the JSON for the sex list looks like this:

            2: Object
            alternateCode: null
            category: "Sex"
            code1: "F"
            codeID: 60002
            description: "Female"
            lastModifiedBy: ""
            lastModifiedDate: "1900-01-01T00:00:00"
            subCategory: null

The member object that should make the select choice has a property on it sex:M. The problem is when I try to bind the select it will populate the list correctly but will not select the option I need:

            <select name="sex" id="sex" class="form-control"
                    ng-model="editableMember.sex"
                    ng-options="s.sex as s.description for s in sexes track by s.code1 "></select>

Any help would be greatly appreciated

it will populate the list correctly but will not select the option I need do you mean you cannot select the option in the dropdown, or the model doesn't change when you select the option, or the option you expected to be the default selection isn't selected? — Hylianpuffball
– Hylianpuffball, Commented Feb 12, 2015 at 2:01
appologies I mean the value on my member object passed in which has a property sex:m does not select the value M in the option when the page loads — Josh
– Josh, Commented Feb 12, 2015 at 3:54
The values need to be identical, so a property value of "m" on the object will not select the "M" option. Could this be what you're experiencing? — nickgraef
– nickgraef, Commented Feb 12, 2015 at 4:50
Then I suspect it's not being set to editableMember correctly. Check the model value by adding <span>Sex: {{ editableMember.sex }}</span> before the select. Does it have the value "M"? — nickgraef
– nickgraef, Commented Feb 12, 2015 at 7:03

nickgraef · Accepted Answer · 2015-02-12 00:48:37Z

1

Perhaps you missed this part of the documentation:

Do not use select as and track by in the same expression. They are not designed to work together.

The ng-model value will be the result of either the select or track by expression. The following code for ng-options should work:

ng-options="s.code1 as s.description for s in sexes"

answered Feb 12, 2015 at 0:48

nickgraef

2,4172 gold badges24 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Angularjs Binding Dropdown using ng-options

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related