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

Controller :

$scope.mySplit = function(string, nb) {
            var array = string.split('|');
            return array[nb];
        }

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

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

我正在尝试使用 ng-options 来调用函数，方法是传递索引和 colName(文档名称)来填充下拉列表，但它不起作用。

代码如下:

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

                $scope.dropdownData[colName] = response;                    

            });
        };

express :

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'} 之前缺少 ,

尝试在您的 Controller 中获得响应并将其推送到数组并在您的 View 中使用该数组:

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