在AngularJS中动态填充下拉列表

据我所见，您的视图完全混乱，您缺少

ng-model

以供您选择输入。

您的JSON不正确——{'id_':'Arizona'} 之前缺少,

尝试在你的控制器中获得响应，并将其推送到数组中，并在你的视图中使用该数组：

$scope.getDropdownData=function(query, colName){                    
$http.get('/getdropdowndata/', {
    params: {
        query: query,
         colName:colName
    }
  }).success(function (response) {
      var returnArray = [];
      alert(JSON.stringify(response));
      angular.ForEach(response,function(option){
      //parse response and push it to returnArray
        returnArray.push(option);
     });
       return returnArray;
  });
}

视图：

   <div class="form-group">
     <select class="form-control" ng-model="selection" ng-options="dropdown._id for dropdown in  getDropDownData()">
     <option value="">Select</option>
    </select>
  </div>

这是Codepen的链接.

考虑以下解决方案：
在控制器中，为下拉数据设置一个变量：

$scope.dropdownData = {};

然后将getDropdownData功能更改为：

$scope.getDropdownData=function(query, colName){                    
    $http.get('/getdropdowndata/', {
        params: {
            query: query,
            colName:colName
        }
    }).success(function (response) {
        alert(JSON.stringify(response));
        $scope.dropdownData[colName] = response; // This will put data into our html file
    });
}

下拉框的HTML应该是：

<div ng-if="mySplit(index,1) == 'select'">                                    
    <select class="form-control" ng-init="getDropdownData(index,colName)" ng-options="dropdown._id for dropdown in dropdownData[colName]">
        <option value="">Select</option>
    </select>
</div>

我使用了臭名昭著的ngInit来调用服务器的数据。也许还有一个我没有考虑过的更好的方法。但在任何情况下，我们的想法都是调用服务器，并以一种可以轻松从视图中获取数据的方式保存数据。

编辑

我不知道为什么，但由于某种原因，这个解决方案不适用于ng-options。然而，当这样使用它时，它确实有效：

<select class="form-control" ng-init="getDropdownData(index,colName)">
    <option value="">Select</option>
    <option ng-repeat="dropdown in dropdownData[colName]" value="dropdown._id">{{dropdown._id}}</option>
</select>

这里有一个简单的例子。

最后我自己解决了。感谢@Rishab777和@yarons的指导。

这是视图代码：

    <div ng-if="mySplit(index, 1) == 'select'">                     
        <select class="form-control">                
            <option value="">Select</option>
            <option ng-model="providerModelData[index]" ng-selected="providerModelData[index]" ng-repeat="dropdown in dropdownData[index]" value="{{dropdown._id}}">{{dropdown._id}}</option>
        </select>
    </div>

和控制器：

        $scope.showModal = false;
        $scope.toggleModal = function (colId, colName) {
            $http.get('/collectiondata/' + colId + '/collectionName/' + colName).success(function (response) {
                $scope.colName = colName;
                $scope.colId = colId;
                for (var key in response) {
                    if (response.hasOwnProperty(key)) {
                        if ($scope.mySplit(key, 1) === 'select') {                                
                            $scope.getDropdownData(key, colName);     
                        }
                    }
                }
                $scope.providerModelData = response;
                $scope.showModal = !$scope.showModal;
            });
        };
        $scope.dropdownData = {};
        $scope.getDropdownData = function (query, colName) {
            $http.get('/getdropdowndata/', {
                params: {
                    query: query,
                    colName: colName
                }
            }).success(function (response) {                    
                $scope.dropdownData[query] = response;
            });
        };

现在的问题是ng-selected="providerModelData[index]"不起作用，它只显示最后一项为选中项。