在 AngularJS 中动态填充下拉列表

Question

我正在尝试根据文档字段的键并在 AngularJS 中使用 ng-if 属性来生成动态表单。

例如：

- If field name is "name|string" then populate textfield
- If field name is "name|select" then populate dropdownlist
- If field name is "name|datepicker" then populate datepicker

以下是代码：

<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.mySplit = function(string, nb) {
            var array = string.split('|');
            return array[nb];
        }

textfields 工作正常并填充数据，但我在填充下拉字段时遇到问题。

示例：我的 mongodb 文档中有两个下拉字段，即 city|select 和 state|select

我正在尝试使用 ng-options 通过传递 index 和 colName（文档名称）来调用函数来填充下拉列表，但它不起作用。

以下是代码：

    $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 中调用函数，但它进入了无限循环。后来我尝试了ng-init 选项，但它只调用或初始化一次，这在我的情况下不起作用。在这里，我需要动态调用函数，并根据我想要填充不同字段的下拉列表。

任何帮助将不胜感激。

Answer 1

据我所知，你的观点完全一团糟

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的链接 .

Answer 2

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

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

看一个简单的例子here。

Answer 3

最后我自己解决了。感谢@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]" 无法正常工作，并且仅显示最后一项。