如何从输入标签的uib-typeahead中选择特定值

Question

大家好，我正在尝试从uib-typeahead一组值中选择一个值，任何伙伴都可以告诉我如何实现这一目标。谢谢

  <div class="col-md-12 col-sm-12 col-lg-12 nopadding">
   <label for="company">Company/Project*</label>
    <input type="text" class="form-control" data-ng-model="formInfo.company" 
      name="company" ng-disabled="loadingCompanyDetails" ng-blur="fetchCompanyDetail()"
     ng-change="resetLocation()" placeholder="Company Name" 
     uib-typeahead="company for company in companyList | filter:$viewValue | limitTo:10"
     id="company" autocomplete="off" required>
  </div>

上面是我的代码，在其中键入任何值时，它会自动给出选项列表，所以我如何从该列表中获取单个值作为默认选择值，第一次我不想输入input标签，而是给出值列表，而不是我希望它会默认从该列表中选择一个值。

这是控制器代码：

        $scope.fetchCompanyList = function () {
      uploadService.getCompanyList()
        .then(function (response) {
            $scope.companyList = response.data;
          },
          function (error) {
            $scope.errorMessage = error.status + " : " + error.statusText;
            if (error.status === 401) {
              loginService.authenticationError();
            }
          }
        );
    };

    /**
     * Method to fetch company details
     */
    $scope.fetchCompanyDetail = function () {
      if ($scope.formInfo && $scope.companyList.indexOf($scope.formInfo.company) >= 0) {
        $scope.company = {};
        $scope.loadingCompanyDetails = true;
        $scope.hideCompanyAboutUs = true;
        $scope.getCompanyDetails($scope.formInfo.company);
      }
    };

这是我的应用程序的屏幕截图。 当用户键入其给定选项列表时。

我实际上想要什么，默认情况下它将在输入框中选择一个选定的值。

谢谢

Answer 1

我不知道您的完整代码，但足以定义ng-model 。

我建议您使用id来标识选定的对象：

  $scope.company = {
    id: 2, 
    name: 'Bert'
  };   

您的输入将如下所示：

typeahead-loading =“正在加载” typeahead-no-results =“ noResults”类=“ form-control input-sm” autocomplete =“关闭”必填>

JS ：

$scope.companyList = [
    {'id': 1, 'name': 'Aaron'},
    {'id': 2, 'name': 'Bert'},
    {'id': 3, 'name': 'Cesar'},
    {'id': 4, 'name': 'David'},
    {'id': 5, 'name': 'Elsa'}];


  $scope.company = {
    id: 2, 
    name: 'Bert'
  };                  

  $scope.selectTypeAhead = function($item)  {
    $scope.company.id = $item.id;
  };

演示柱塞

---

因此，如果您没有正确的模型-这意味着formInfo.company的定义不正确。

您可以通过输入HTML轻松验证它：

<pre>{{formInfo|json}}</pre> 

Answer 2

另外，您可以按ID设置值：

在ES6中

$scope.company = $scope.companyList.filter(comp => comp.id == 2)[0]

$scope.companyList = [
    {'id': 1, 'name': 'Aaron'},
    {'id': 2, 'name': 'Bert'},
    {'id': 3, 'name': 'Cesar'},
    {'id': 4, 'name': 'David'},
    {'id': 5, 'name': 'Elsa'}];