Javascript 在AngularJS中动态填充下拉列表

我正在尝试根据文档字段的键生成动态表单，并在AngularJS中使用

ng if

属性

例：

代码如下：

<div class="form-group" ng-repeat="(index, formVal) in providerModelData"  ng-if="!$first">                    
        <label>{{mySplit(index,0) | uppercase}}</label>
        <div ng-if="!mySplit(index,1)">
            <input type="text" class="form-control" ng-model="providerModelData[index]">
        </div>
        <div ng-if="mySplit(index,1) == 'datepicker'">
            <input type="text" class="form-control" ng-model="providerModelData[index]">            
        </div>
                <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>
    </div>

    $scope.dropdownData = {};
        $scope.getDropdownData = function (query, colName) {
            $http.get('/getdropdowndata/', {
                params: {
                    query: query,
                    colName: colName
                }
            }).success(function (response) {

                $scope.dropdownData[colName] = response;                    

            });
        };

textfields

在填充数据方面运行良好，但我在填充下拉字段时遇到了问题

示例：我的mongodb文档中有两个下拉字段，即

city | select

和

state | select

我试图使用

ng options

调用函数，通过传递index和colName（文档名）来填充dropdownlist，但它不起作用

代码如下：

<div class="form-group" ng-repeat="(index, formVal) in providerModelData"  ng-if="!$first">                    
        <label>{{mySplit(index,0) | uppercase}}</label>
        <div ng-if="!mySplit(index,1)">
            <input type="text" class="form-control" ng-model="providerModelData[index]">
        </div>
        <div ng-if="mySplit(index,1) == 'datepicker'">
            <input type="text" class="form-control" ng-model="providerModelData[index]">            
        </div>
                <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>
    </div>

    $scope.dropdownData = {};
        $scope.getDropdownData = function (query, colName) {
            $http.get('/getdropdowndata/', {
                params: {
                    query: query,
                    colName: colName
                }
            }).success(function (response) {

                $scope.dropdownData[colName] = response;                    

            });
        };

快递：

router.route('/').get(function (req, res) {    
    var url_parts = url.parse(req.url, true);
    var query = url_parts.query;
    console.log(query.query);
    db.collection(query.colName).aggregate([{
        "$group":{
            "_id":"$"+query.query
            }
        }],function (err, docs) {        
        console.log(docs);
        res.json(docs);
    });
});

最初我尝试在

ng repeat

中调用函数，但它进入了内线循环。后来我尝试了

nginit

选项，但它只调用或初始化一次，在我的情况下不起作用。在这里，我需要动态调用函数，并在此基础上填充不同字段的下拉列表

---

任何帮助都将不胜感激。

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

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

---

请看一个简单的例子。

就我所见，您的视图完全混乱，您丢失了

ng-model

为您选择输入

您的JSON不正确，因为它在

{'id_u':'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>

挑选

这里是链接到

---

.

最后我自己解决了。感谢@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>

---

现在问题是

ng selected=“providerModelData[index]”

不起作用，它只将最后一项显示为选中项。

问题在于

“dropdown.\u getDropdownData（index，colName）中的下拉id）

getDropdownData

是一个函数，而不是集合。您需要将该函数调用的结果保存到范围变量，并将该变量用于

ng选项

如何在角度表达式中使用$scope变量？Bcoz我是从我的

视图中调用函数的

不是从控制器中调用的。您可以为代码提供一个JSBin或代码笔，当您硬编码服务器I.getDropDownApi的响应而不发送请求并接受来自服务器的请求时会发生什么情况？如果您可以提供来自服务器的响应结构和providerModelData的内部结构以及每个请求和响应结构，这将是有帮助的。我尝试了这个方法，但没有成功。dropdown未填充数据您是否尝试调试角度代码以验证是否调用了

getDropdownData

函数？是的函数正在被调用并返回对象，但未填充DropdownList中的数据在我的回答中，我使用空对象

{}

初始化了

$scope.dropdownData

。你用一个空数组初始化了你的数组。这是我的城市数组：

[{{u-id:'LA'}，{u-id:'LA'}，{u-id:'Denver'}，{u-id:'LR'}]

，这是州的

[{u-id:'Arizona'}{u-id:'California'}，{u-id:'Arizona'}

。数组格式正确吗？是的，但是你能提供一个你从服务器上得到的样本吗？上面的解决方案有效吗？我试过@yarons解决方案，但它没有在下拉列表中填充数据这是我从服务器上得到的<代码>[{id:'LA'}，{id:'LA'}，{id:'Denver'}，{id:'LR'}][{id:'Arizona'}{{u-id:'California'}，{u-id:'Arizona'}]这是一个无效的json，在{u-id:'Arizona'}之前缺少逗号？？它是从

mongodb/express生成的
    <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;
            });
        };