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>

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

这是控制器代码：

        $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'
  };

您的输入将如下所示：

预输入装载=＆＃34;装载＆＃34; 预输入-NO-结果=＆＃34; noResults＆＃34; class =＆＃34; form-control input-sm＆＃34; 自动填充=＆＃34;关闭＆＃34;所需＆GT;

<强> 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;
  };

Demo Plunker

因此，如果您没有获得正确的模型 - 这意味着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'}];

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

2 个答案: