Angularjs populate Select2 plugin with values from http request

Question

I'm new in angularjs and I have a problem with values from http request. I use this values to populate an Select field but I can't set the default value (for example the first element of array). This is my javascript code:

var app = angular.module('myApp',[]);
app.controller('freeUserController', function($scope, $http) {
    $http({
        method: 'GET',
        url: 'users'
    }).then(function successCallback(response) {
        $scope.users = response.data.result;
        $scope.selectedItem = $scope.users[0];
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
});

Instead on my html code I have

<label>Username</label> <select class="form-control select2"
    style="width: 100%;" name="user" ng-model="selectedItem" ng-options="user.username for user in users">
</select>

If I change the result of http request with static array all works fine. Are you know why I have this problem?

Before I used this thymeleaf code with success:

<div class="form-group" id=existingUser>
    <label>Username</label> <select class="form-control select2"
    style="width: 100%;" th:field="*{user}">
    <option th:each="user: ${users}" th:value="${user.username}"
    th:text="${user.username}"></option>
    </select>
</div>

this is the debug image

I tought was a problem of plugin, but with static array it works like with thymeleaf

try it jsfiddle.net/sinkz/HB7LU/23128

DiegoAugusto
– DiegoAugusto

2016-02-02 10:21:59 +00:00
Commented Feb 2, 2016 at 10:21 — DiegoAugusto
– DiegoAugusto, Commented Feb 2, 2016 at 10:21
the problem is with the http call

luca
– luca

2016-02-02 10:31:32 +00:00
Commented Feb 2, 2016 at 10:31 — luca
– luca, Commented Feb 2, 2016 at 10:31
try console.log(response.data.result). What is displayed?

DiegoAugusto
– DiegoAugusto

2016-02-02 10:41:00 +00:00
Commented Feb 2, 2016 at 10:41 — DiegoAugusto
– DiegoAugusto, Commented Feb 2, 2016 at 10:41
I added browser debug image

luca
– luca

2016-02-02 10:46:38 +00:00
Commented Feb 2, 2016 at 10:46 — luca
– luca, Commented Feb 2, 2016 at 10:46

Amit Jambotkar · Accepted Answer · 2016-02-02 10:23:49Z

1

Your using user.username to display and in script your assigning complete user Object like this

$scope.selectedItem = $scope.users[0];

change this to

$scope.selectedItem = $scope.users[0].username;

This should work now

edited Feb 2, 2016 at 10:23

answered Feb 2, 2016 at 10:14

Amit Jambotkar

925 bronze badges

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

Comments

bgeissler · Accepted Answer · 2016-02-02 10:13:30Z

0

should can easily give the select an "ng-init" like so:

<select class="form-control select2" ng-init="selectedItem = users[0]"
style="width: 100%;" name="user" ng-model="selectedItem" ng-options="user.username for user in users">

Sorry for formating

answered Feb 2, 2016 at 10:13

bgeissler

881 silver badge6 bronze badges

Comments

Alexandr Lazarev · Accepted Answer · 2016-02-02 10:13:40Z

0

Try to set user.id as user.username in ng-options directive.

<select class="form-control select2"
    style="width: 100%;" name="user" ng-model="selectedItem" ng-options="user.id as user.username for user in users">
</select>

answered Feb 2, 2016 at 10:13

Alexandr Lazarev

13k4 gold badges40 silver badges47 bronze badges

Comments

Thangadurai · Accepted Answer · 2016-02-02 10:18:27Z

0

In ng-model give like this and try.

ng-model="selectedItem.username"

Otherwise in controller change like below:

$scope.selectedItem=$scope.users[0].username;

edited Feb 2, 2016 at 10:18

answered Feb 2, 2016 at 10:12

Thangadurai

5441 gold badge9 silver badges21 bronze badges

2 Comments

Thangadurai Over a year ago

Can you post your response? What u r getting from back end?

luca Over a year ago

if I set $scope.users[0].username I must not use selectedItem.username in ng-model. In javascript the variables are setted fine, but the default value of select is empty string

Mahantesh Kumbar · Accepted Answer · 2016-02-02 11:50:06Z

0

Try this

    <select ng-model="selectedItem" ng-options="user.username as user.username for user in users">
          <option value="" selected="selected">{{users[0].m}}</option>
    </select>

Controller

$scope.selectedItem = $scope.users[0].username;

edited Feb 2, 2016 at 11:50

answered Feb 2, 2016 at 11:11

Mahantesh Kumbar

2551 silver badge10 bronze badges

2 Comments

luca Over a year ago

without the class it works, maybe the problem is between Select2 plugin and angularjs

luca Over a year ago

it doesn't work, I can try to check if value is selected and let the default value empty

Collectives™ on Stack Overflow

Angularjs populate Select2 plugin with values from http request

5 Answers 5

Comments

Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related