如何选择输入标签从UIB-预输入特定的值

问题描述 投票:0回答:2

大家好我试图选择UIB-预输入组值的单值,可以在任何哥们告诉我如何可以实现的,谢谢

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

这里是应用程序的我的屏幕截图。当用户键入的选项它给予名单。 enter image description here

其实我想它会默认选择在输入框中输入一个选择的值。

enter image description here

谢谢

javascript angularjs twitter-bootstrap-3 yeoman-generator-angular
2个回答
0
投票

我不知道你完整的代码,但不足以定义ng-model

我建议你使用id识别选择的对象:

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

您的反馈会是这样的:

预输入加载= “加载” 预输入-NO-结果= “noResults” 类= “形式控制输入-SM” 自动填充= “关” 所需>

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> 

0
投票

在addision,您可以通过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'}];
© www.soinside.com 2019 - 2024. All rights reserved.