Question

主要问题是我有一个下拉菜单，其选项应该动态更新。工作流程如下：我有一个input元素连接到名为ng-model的{{1}}，当超过3个字符时，应触发toSubmit调用以获取应填充下拉菜单的列表。因此，每次http.get变量更改时，此列表都会更改。我们将此列表称为toSubmit（在控制器中为database。

我现在正在尝试的是一个非常简单的解决方案，它最有效，因为包含下拉列表的html DOM在开始时加载，并且不跟踪选项中的更改。

在我的控制器中，我有以下部分监视$scope.database：

toSubmit

我的html如下所示：

$scope.toSubmit = '';

$scope.$watch('toSubmit',function(query){


          if (query.length >= 3){

            getQueryDatabases.companyNameService({'field':'name','query':query,'numberOfHits':'10'},'CIK').prom.then(
            function(dataObject){

                  $scope.database = dataObject;

                  // dataObject.forEach(function(item){
                  //   $scope.databaseString.push(item.cik + ' ' + item.companyName);
                  });

                });

          }
        });

现在接受<label for="nameCompany">Name:</label> <input type="text" ng-model="toSubmit"></input> <select ng-model="database" ng-options="line in database"></select>与database的约束，我会得到结果，但我很可能是错的。有人可以帮助我吗？

Answer 1

我建议您使用select2处理服务器请求之前限制输入的内容，并具有良好的外观和可扩展性。

您需要将angular-ui-select2添加到项目中。这是给你的代码： HTML：

<input class='form-control' data-ng-model='position.company' data-ng-required data-placeholder='Company:' data-ui-select2='employerSelect2Options' id='company_name' type='hidden'>

JavaScript的：

    $scope.employerSelect2Options = {
    minimumInputLength: 2,
    query: function (query) {
        var _query = query;
        var companies = Restangular.all('companies').getList({query: query.term});

        companies.then(function(data) {
            var results = {results: []};
            _.each(data, function(element, index, list) {
                results.results.push({id: element.id, text: element.name});
            })
            if(!_.contains(_.map(data, function(element){ return element.name; }), _query.term)) {
                results.results.push({id: _query.term , text: 'Create company "' + _query.term + '"'});
            }
            _query.callback(results);
        })
    }
};

我的例子还包含添加＆＃34;创建公司＆＃34;的逻辑。如果返回零结果。在这种情况下，position.company将在id字段中包含未找到的公司名称的文本，您可以在服务器端检查它并在分配ID之前创建一个。

中的这个逻辑

if(!_.contains

条件。

动态获取角度下拉菜单的选项

1 个答案: