CODEWITHSUNDEEP
javascriptc#angularjs
Talen Kylon
Talen Kylon

Reputation: 1968

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

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"]

Upvotes: 0

Views: 3856

Answers (1)

Matthew Cawley
Matthew Cawley

Reputation: 2818

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.

Upvotes: 1

Related Questions