Question

我在指令中实现了以下类型的前导代码。

这是HTML：

<div>
    <input type="text"
           ng-model="company"
           uib-typeahead="company as company.name for company in companyByName($viewValue)"
           typeahead-loading="loadingCompanies"
           typeahead-no-results="noCompanyResults"
           class="form-control">
    <i ng-show="loadingCompanies" class="glyphicon glyphicon-refresh"></i>
    <div ng-show="noCompanyResults">
        <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>
</div>

这是JavaScript：

  scope.companyByName = function() {
    var companyName = scope.company.name ? scope.company.name : scope.company;
    var searchTerms = {name: companyName, startRow: 0, endRow: 20};

    return $http.post("backend/get/companies.php", searchTerms).then((result) => {
      $log.info("Companies", result.data.results);
      return result.data.results;
    });
  };

PHP代码backend/get/companies.php接受搜索字符串并返回一个对象数组，其中id和name属性的名称包含该搜索字符串。

以下是我遇到的行为：

当我输入单个字符＆＃34; f＆＃34;在typeahead字段中，传递给后端脚本的companyName的值为＆＃34;＆＃34; （空字符串）。 backend/get/companies.php会返回所有结果。

当我输入第二个字符＆＃34; fo＆＃34;在typeahead字段中，传递给后端脚本的companyName的值是＆＃34; f＆＃34;。 backend/get/companies.php会返回与＆＃34; f＆＃34;。

匹配的结果

输入第三个字符＆＃34; foo＆＃34;返回匹配＆＃34; fo＆＃34;等的结果

我已经在official examples之后对我的代码进行了建模。到底是怎么回事？我的感觉是，companyByName()函数以某种方式被一个事件调用，该事件在字符输入输入之前触发。有什么想法吗？

Answer 1

Typeahead必须比页面摘要更快，因此使用范围而不是值，它只是不完全在那里。

Here是一个显示两个版本的plunker。基本上你需要第一个版本如下

cmdkey /add:<storage-account-name>.file.core.windows.net /user:<storage-account-name> /pass:<storage-account-key>

具有异步加载的Angular bootstrap typeahead是

1 个答案: