Question

我使用此帖子作为参考How can I populate a select dropdown list from a JSON feed with AngularJS?

我的代码不会抛出任何错误，但下拉列表不包含任何预期的值。从api调用成功获取数据并将其存储到变量$ scope.dataTypes中。

在执行时，

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

但同样，下拉列表为空。另外两个变量TemplateName和ColumnCount正确显示。

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

执行时$ scope.dataTypes的控制台输出

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

Answer 1

您可以使用ng-repeat指定下拉列表的内容：

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

或者您可以在数组语法中使用标记的ng-options 值：

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

在任何一种情况下，您只能使用ngModel绑定到列表中的所选项目。

尝试使用angular填充REST调用的下拉列表

1 个答案: