我正在使用md-autocomplete,因为md-items没有正确更新从服务主机 - Ajax Call获得的响应列表。
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中正确更新。
我在这里搜索 8224 ,但会显示 822 的结果。我在Firebug中调试了这个问题,看到上面显示的屏幕截图,请求是针对搜索词 8224 发送的,我得到了两个匹配项的响应作为JSON对象,显示在在屏幕截图2下面
在UI中,它显示结果82232,82247,82248,82270。但实际上服务返回是82247和82248.
如何更新Angular Material md-autocomplete的UI中的Item-source?请帮助我。
支持性问题发布在以下链接Manually call $scope.$apply raise error on ajax call - Error: [$rootScope:inprog]
中答案 0 :(得分:2)
以下帖子中标记的答案根据要求是正确的。 $http issue - Values can't be returned before a promise is resolved in md-autocomplete Angular Material
不要使用.success(),使用.then在UI中获取更新的结果......