md-items未在md-autocomplete Angular Material

时间:2016-02-25 10:42:59

标签: angularjs json ajax angular-material

我正在使用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中正确更新。

屏幕截图1:Screen Shot 1

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

Response JSON - 2 Objects

在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]

1 个答案:

答案 0 :(得分:2)

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

  • .then() - promise API的全部功能,但稍微更详细
  • .success() - 不返回承诺,但提供稍微方便的语法

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