How to set a particular value selected when data is coming from an API

Question

I have a dropdown list:-

<label>User Code:</label>
<select ng-options="c as c.User for c in userList"
    ng-model="selectedUser" id="search3">
</select>

The data in this dropdown is coming from an API. My directive code:-

scope.getAllPeriodicities = function(){
    scope.userList = [];
    ApiServices.getAllPeriodicities().then(function (response) {
        scope.userList = response.data;
    });
}

scope.getAllPeriodicities();

There is an User Code:-SS1234. I want this user to be selected whenever the page loads. I am thinking of using selected attribute but not sure how to use it on the fetched data.

You don't need to use the `selected` attribute, just set `$scope.selectedUser` to be equal to the item you want in your list — George, Jun 28 '17 at 09:22
Possible duplicate of [How to set default value in ng-options](https://stackoverflow.com/questions/33993468/how-to-set-default-value-in-ng-options) — Ramesh Rajendran, Jun 28 '17 at 09:38

score 1 · Answer 1 · answered Jun 28 '17 at 09:24

1

scope.getAllPeriodicities = function(){
  scope.userList = [];
    ApiServices.getAllPeriodicities().then(function (response) {
       scope.userList = response.data;
       scope.selectedUser = "SS1234";
   });
}
scope.getAllPeriodicities();

answered Jun 28 '17 at 09:24

n1kkou

3,096
2
21
32

Ramesh Rajendran · Answer 2 · 2017-06-28T09:26:49.493

1

Set your default value to the ng-model by using ng-init or ng-value

<select ng-options="c as c.User for c in userList" ng-model="selectedUser" 
 id="search3" ng-value={{selectedUser = 'SS1234'}}></select>

//or

<select ng-options="c as c.User for c in userList" ng-model="selectedUser" 
 id="search3" ng-init="selectedUser = 'SS1234'"></select>

edited Jun 28 '17 at 09:26

answered Jun 28 '17 at 09:24

Ramesh Rajendran

37,412
45
153
234

Wouldn't this select the first option from the returned promise? – n1kkou Jun 28 '17 at 09:26
that's why I have mentioned to use `ng-init` – Ramesh Rajendran Jun 28 '17 at 09:29

score 1 · Answer 3 · answered Jun 28 '17 at 09:26

1

simply asign, scope.selectedUser="SS1234" user you want.

scope.userList = response.data;
scope.selectedUser = scope.userList[0].User /* here i choose 0th index of user. you can change as you want */

answered Jun 28 '17 at 09:26

Mohideen bin Mohammed

18,813
10
112
118

score 0 · Answer 4 · answered Jun 28 '17 at 09:24

0

In your controller add,

$scope.selectedUser = 'SS1234';

answered Jun 28 '17 at 09:24

Gokulan P H

1,838
1
10
13

How to set a particular value selected when data is coming from an API

4 Answers4