angularjs - md-autocomplete $http get 不绑定(bind)数据

Question

我试图在搜索时将数据绑定(bind)到自动完成文本框。下面是我的代码。我可以从 api 获取数据，但它没有绑定(bind)到文本框。

  <md-autocomplete flex required flex-gt-sm="25"
                             md-input-name="autocompleteField"
                             md-input-minlength="2"
                             md-input-maxlength="18"
                             md-no-cache="noCache"
                             md-selected-item="selectedItem"
                             md-search-text="searchText"
                             md-items="item in querySearch(searchText)"
                             md-item-text="item.Customer_Nm"
                             md-floating-label="Customer">
                <md-item-template>
                    <span md-highlight-text="searchText">{{item.Customer_Nm}}</span>
                </md-item-template>

函数查询搜索(查询){

    $http({
        url: '/api/GateMoveAPI/GetCustomerData',
        method: 'GET',
        params: { sSearchText: query }
    }).success(function (data, status, headers, config) {

    return data;
});

}

提前致谢。

Answer 1

使用 $scope 属性来保存状态而不是函数。为此，您需要使用 md-search-text-change 触发搜索。您还可以使用md-delay限制搜索行为。有关更多详细信息，请参阅指令属性:https://material.angularjs.org/latest/api/directive/mdAutocomplete

更改您的代码如下:

HTML:

<md-autocomplete flex required flex-gt-sm="25"
                         md-input-name="autocompleteField"
                         md-input-minlength="2"
                         md-input-maxlength="18"
                         md-no-cache="noCache"
                         md-selected-item="selectedItem"
                         md-search-text="searchText"
                         md-items="item in items"
                         md-search-text-change = "querySearch(searchText)"
                         md-item-text="item.Customer_Nm"
                         md-floating-label="Customer">
<md-item-template>
  <span md-highlight-text="searchText">{{item.Customer_Nm}}</span>
</md-item-template>

JS

$scope.querySearch = function (query) {
  $http({
    url: '/api/GateMoveAPI/GetCustomerData',
    method: 'GET',
    params: { sSearchText: query }
  }).success(function (data, status, headers, config) {
    $scope.items = data;
  });
}