CODEWITHSUNDEEP
javascriptangularjs
kerki
kerki

Reputation: 135

filling select option with ajax and angular

I have a select box I like to fill with data I get from the ajax file,this is the code I have,but I don't get any data into my select dropdown.

html:
    <select ng-model="selectedTestAccount" ng-options="item.Id as item.Name for item in testAccounts">
        <option value="">Profiles</option>
    </select>

js:
    angular.module('test', []).controller('DemoCtrl', function ($scope, $http) {
$scope.selectedTestAccount = null;
$scope.testAccounts = [];

$http({
        method: 'GET',
        url: 'http://duda-api-test.herokuapp.com/profiles',
        data: { applicationId: 3 }
    }).success(function (result) {
    $scope.testAccounts = result;
});

});

Upvotes: 0

Views: 952

Answers (2)

Brant
Brant

Reputation: 1788

In looking at your data source:

http://duda-api-test.herokuapp.com/profiles

Your ng-options is wrong. It should be:

ng-options="item.id as item.full for item in testAccounts"

You get back id & full, not Id and Name.

Upvotes: 0

Jose Rocha
Jose Rocha

Reputation: 1115

Do you consider in use a directive instead?

.directive('mySelect', ['$scope','$http', function ($scope, $http) {
return {
    restrict: 'AE',
    replace: true,
    transclude: false,
    scope: { ngModel: '@'},      
    template: '<select "' +
                'ng-options="item.Id as item.Name for item in List">' +
                '<option value="">Profiles</option> ' +
              '</select>',
    link: function ($scope) {

    $http({
            method: 'GET',
            url: 'http://duda-api-test.herokuapp.com/profiles',
            data: { applicationId: 3 }
        }).success(function (result) {
        $scope.List = result;
    }
};
}]);

html

<my-select ng-model="selectedTestAccount></my-select>

Upvotes: 2

Related Questions