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

任何帮助都将不胜感激。

Answer 1

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

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

到目前为止，我发现你的视图完全搞砸了

Time.now - (0..30).to_a.sample.days - (0..24).to_a.sample.hours

用于您的选择输入。

您的JSON在ng-model

之前不合适,

尝试在控制器中获取响应并将其推送到数组并在View中使用该数组：

{'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;
  });
}

以下是Codepen的链接

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]"无法正常工作，并且只显示最后一项。

在AngularJS中动态填充下拉列表

3 个答案:

修改