Trying to populate a dropdown list from a REST call using angular

Question

I was using this thread as a reference How can I populate a select dropdown list from a JSON feed with AngularJS?

My code does not throw any errors, but the dropdown list does not contain any of the values expected. The data is successfully grabbed from the api call and stored into the variable $scope.dataTypes.

At execution time,

$scope.dataTypes = ['string', 'integer', 'double']

But again, the dropdown list is empty. The other two variables, TemplateName and ColumnCount are displaying correctly.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="~/Scripts/angular.js"></script>
    <script>
        function GetDataTypes($scope, $http) {
            $scope.dataTypes = [];
            $scope.TemplateName = 'NameTest';
            $scope.ColumnCount = '20';
            $http({
                method: 'GET',
                url: 'http://localhost:60568/GetDataTypes'
            }).then(function (result) {
                $scope.dataTypes = result.data.Result;
                console.log(dataTypes);
            });
        }
        var myApp = angular.module("myApp", []);
        myApp.controller("GetDataTypes", GetDataTypes);
    </script>
</head>

<body ng-app="myApp">
    <div id="TemplateScreen" ng-controller="GetDataTypes">
        TemplateName :- <input ng-model="TemplateName" type="text" id="TemplateName" value="" /><br />
        ColumnCount :- <input ng-model="ColumnCount" type="text" id="ColumnCount" value="" /><br />
        Select DataType :-
            <select ng-model="dataTypes">
                <option value=""></option>
            </select>
        <div id="divTemplateName">{{TemplateName}}</div>
        <div id="divColumnCount">{{ColumnCount}}</div><br />
    </div>
</body>
</html>

Console Output of $scope.dataTypes at execution time

(5) ["INTEGER_DATATYPE", "STRING_DATATYPE", "DOUBLE_DATATYPE", "BOOL_DATATYPE", "CHAR_DATATYPE"]

Matthew Cawley · Accepted Answer · 2017-08-23 01:52:56Z

1

You can use ng-repeat to specify the contents of the dropdown list:

<select ng-model="selectedDataType">
    <option ng-repeat="dt in dataTypes">{{ dt }}</option>
</select>

Or you can use ng-options with the label for value in array syntax:

<select ng-model="selectedDataType"
        ng-options="dt for dt in dataTypes" />

In either case, you only use ngModel to bind to the selected item in the list.

edited Aug 23, 2017 at 1:52

answered Aug 23, 2017 at 0:48

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

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

6 Comments

Talen Kylon Over a year ago

Simply dropping this in did not work I get the same results - empty dropdown list. Is there additional code I need?

Matthew Cawley Over a year ago

Seems strange, looks okay, is it not the same as this example on W3Schools? Does $scope.dataTypes definitely get set correctly?

Talen Kylon Over a year ago

I've printed out $scope.dataTypes to console, included in OP.

Talen Kylon Over a year ago

Figured it out! Typo on the line <option ng-repeat="dt in dateTypes">{{ dt }}</option>. Should be dataTypes not dateTypes :P

Talen Kylon Over a year ago

Ha! No worries, I had a good laugh once I noticed it! Appreciate the help!

|

Collectives™ on Stack Overflow

Trying to populate a dropdown list from a REST call using angular

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related