md-items 未在 md-autocomplete Angular Material 中正确更新建议列表答案

【问题标题】：md-items is not updating the suggesion list properly in md-autocomplete Angular Materialmd-items 未在 md-autocomplete Angular Material 中正确更新建议列表
【发布时间】：2016-02-25 10:42:59
【问题描述】：

我正在使用 md-autocomplete，因为 md-items 没有正确更新从服务主机 - Ajax 调用获得的响应列表。

HTML 源代码

<md-autocomplete flex required
    md-input-name="autocompleteField"
    md-no-cache="true"
    md-input-minlength="3"
    md-input-maxlength="18"
    md-selected-item="SelectedItem"
    md-search-text="searchText"
    md-items="item in querySearch(searchText)"
    md-item-text="item.DisplayName" Placeholder="Enter ID" style="height:38px !important;">
    <md-item-template>
        <span class="item-title">
            <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.ID}} </span>
            <span> - </span>
            <span md-highlight-text="searchText"  md-highlight-flags="^i"> {{item.Description}} </span>
        </span>
    </md-item-template>
</md-autocomplete>

AngularJS 脚本

//bind the autocomplete list when text change
function querySearch(query) {
    var results = [];
    $scope.searchText = $scope.searchText.trim();
    if (query.length >=3) {
        results = LoadAutocomplete(query);
    }
    return results;
}

//load the list from the service call
function LoadCPTAutocomplete(id) {
    TestCalculatorService.searchAutocomplete(id).then(function (result) {
        if (result.data != null) {
            $scope.iList = result.data;
        } else {
            $scope.iList = [];
        }
    });
    return $scope.iList;
}

我正在从服务主机获取自动完成列表。我得到了正确的响应，但它没有在 UI 中正确更新。

屏幕截图 1：

我在这里搜索 8224，但它显示了 822 的结果。我在 Firebug 中调试了这个问题，看到上面显示的屏幕截图，请求是针对搜索词 8224 发送的，我得到了两个匹配项作为 JSON 对象的响应，显示在下面的屏幕截图 2

在 UI 中显示结果为 82232、82247、82248、82270。但实际上 Service 返回的是 82247 和 82248。

如何在 UI 中为 Angular Material md-autocomplete 更新项目源？请帮助我。

支持性问题已发布在以下链接Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]

【问题讨论】：

好吧.. 是的，searchAutocomplete 是异步的，所以您在searchAutocomplete 完成之前返回存储在$scope.iList 中的值。 querySearch 在第一次运行时返回未定义或空数组，然后在第二次运行时它会显示第一次运行的值，因为此时它已经完成，因此更新$scope.iList。我建议找到一种方法来做到这一点，而不是直接在视图中使用 queryResult，而是让视图查看范围变量。
例如，"item in iList"（尽管仅此一项并不能完全解决这个问题，但当 searchText 发生变化时，您仍然必须以某种方式调用 queryResult）
@KevinB 我发布了一个问题stackoverflow.com/questions/35646077/… - 我使用了你所说的方法，但我仍然面临这个问题。所以，我用谷歌搜索了很多，找到了一个帖子stackoverflow.com/questions/21127709/…，他们建议使用 $scope.$apply，但是 $scope.$apply 会引发错误。如果我使用直接分配，那么它会给出与这篇文章相同的输出。
尝试在回调中移动 return $scope.iList。否则函数会在收到回调之前返回。
@SambhavSharma 我试过了。但它也提供相同的输出。

标签： angularjs json ajax angular-material

【解决方案1】：

根据要求，以下帖子中标记的答案是正确的。 $http issue - Values can't be returned before a promise is resolved in md-autocomplete Angular Material

.then() - Promise API 的全部功能，但略显冗长
.success() - 不返回承诺，但提供更方便的语法

不要使用 .success()，使用 .then 来获取 UI 中的更新结果...

【讨论】：