FIlling a Dropdown Box using angularJS

Question

I have created a service, written a code grabbing the names of the users in the AngularJS controller and am calling it in the view but i dont see anything :/ am i doing something incorrectly? new to angularJS btw.

this is the revised angular controller

Read this: http://stackoverflow.com/questions/12139152/how-to-set-the-value-property-in-angularjs-ng-options you should use ng-options for the select box rather than ng-repeat. — SoluableNonagon, Dec 21 '15 at 16:20
you can't have the NG-MODEL and NG-OPTIONS use the same object ($scope.allUsers) , that would be partly why your code isn't working. Whenever you make a selection in the dropdown, it would overwrite your allUsers model. — SoluableNonagon, Dec 21 '15 at 18:08

score 1 · Answer 1 · answered Dec 21 '15 at 16:22

1

Official way of generating options in AngularJS:

<select ng-model="mySelection" ng-options="user.value as user.userName for user in allUsers">
    <option value=""></option>
</select>

Also, you are setting ng-model to be the same as the thing being looped, hence you're seeing nothing.

ng-model will be the variable which will save your selection from allUsers.

answered Dec 21 '15 at 16:22

SoluableNonagon

11,541
11
53
98

so ng-model should be equal to "users" ? its the variable in my controller if i am understanding this correctly – Edgar Dec 21 '15 at 17:50
don't use the same variable in ng-options and ng-model, the ng-options should use `allUsers` while ng-model should have a different variable, like `selectedUser` – SoluableNonagon Dec 21 '15 at 18:10

score 1 · Answer 2 · answered Dec 21 '15 at 16:23

You need to use ng-options directive to generate <option> elements. ng-model directive is used to specify model property to store selected option.

Example from official documentation:

<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>

You can read more here: https://docs.angularjs.org/api/ng/directive/ngOptions

FIlling a Dropdown Box using angularJS

2 Answers2