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. jsbin.com/suniriteqo/2/edit — PSL
– PSL, Commented Oct 27, 2014 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
– Ghassan Karwchan, Commented Oct 27, 2014 at 16:35
works for me jsbin.com/suniriteqo/4/edit which version of angular you are using? Or replicate your issue in the demo. — PSL
– PSL, Commented Oct 27, 2014 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
– Ghassan Karwchan, Commented Oct 27, 2014 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 stackoverflow.com/questions/26372534/… — PSL
– PSL, Commented Oct 27, 2014 at 16:44

Ghassan Karwchan · Accepted Answer · 2014-10-30 14:58:18Z

0

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.

answered Oct 30, 2014 at 14:58

Ghassan Karwchan

3,5677 gold badges40 silver badges70 bronze badges

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

Collectives™ on Stack Overflow

AngularJS, Select and binding to value

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related