AngularJS, Select and binding to value

Question

I have a scenario that I thought it is logical, but seems angular doesn't support it.

So, I have in the scope/controller a list of user types as array of objects like this:

$scope.userTypes = [{text : "Buyer", value : "1"},
    {text : "Vendor", value :  "2"},
    {text : "Buyer / Vendor", value : "9"}];

$scope.user = new User(globalSelectedUserType);

Where the User is defined like this:

function User(userType) {
    this.userType = userType;
    this.isAdminUser = false;
    this.isActive = true;
    this.roleDisabled = true;
};

And I want to have a select element with the list of options coming from the userTypes binding the values to the "value" property and text to the "text" property , and bind the select value to only the "value" property of the array object, allowing the user to set the value from the code.

so when I create the user from the code using this

$scope.user = new User("9");

it should initialize the select with the "Buyer / Vendor" selected.

Reading the documentation of the select element in angular and ng-options, seems it is impossible to do. I tried this

<select name="usertypedata" id="UsersTypeData" ng-model="user.userType"
          ng-disabled="user.roleDisabled" ng-options="usertype.value as usertype.text for usertype in userTypes track by usertype.value">
         </select>

and when we select the option, I want only the "value" property to be populated by the ng-model

Remove track by, this issue generally happens when you use track by with _select as_ (`usertype.value as`) syntax, you dont need both. http://jsbin.com/suniriteqo/2/edit — PSL, Oct 27 '14 at 16:34
I did. It didn't work, and it made the values in the select / options as the index of the array — Ghassan Karwchan, Oct 27 '14 at 16:35
works for me http://jsbin.com/suniriteqo/4/edit which version of angular you are using? Or replicate your issue in the demo. — PSL, Oct 27 '14 at 16:36
Yes, it works in initializing , but if you check the generated options of the select, you will see the options has values as the index of the array element, and not the "value" property of the array element. I mean the options has values: {0, 1, 2} and not {1,2,9} — Ghassan Karwchan, Oct 27 '14 at 16:42
Why do you care about the option value, angular manages it, right. All you need to worry about is the ngModel value right. Also take a look at http://stackoverflow.com/questions/26372534/parsing-object-in-ng-options-for-angularjs-select-drop-down-using-nested-json/26372614#26372614 — PSL, Oct 27 '14 at 16:44
ok, I see what do you mean. Unfortunately, I am posting the html page using usual html form submit. And it is passing the selected option's value, instead of ng-model — Ghassan Karwchan, Oct 27 '14 at 16:49
if you are using form post then you could keep a hidden input with the value (or id of the option or whichever identifier) as that of ng-model and read that value on the server. — PSL, Oct 27 '14 at 17:15
yup This is what I did after I read your previous comment. I understood that ng-model is not the same as the option-value, so I did what you are suggesting now. Thanks a lot for your help. I was struggling with this for a while — Ghassan Karwchan, Oct 27 '14 at 17:17

score 0 · Accepted Answer · answered Oct 30 '14 at 14:58

I have two answers for this. First answer is what PSL suggested in his comments before. The second answer is

instead of binding ng-options to an array, I bind it to an object and it worked fine

to elaborate more, it might be that I am not doing fully angular solution from start to end. I am using angular to populate / and control the behavior of the html page / form.

But later, I am doing normal html/form submit that will submit all the data inside the form. and usual form/submit, will use the select/option value to submit that value, and not ng-model

but ng-model was important for me to select the option programmatically.

AngularJS, Select and binding to value

1 Answers1