如何從輸入標簽的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'}];