$ HTTP问题 - 值不能承诺前归还在角材料MD-自动完成解决 [英] $http issue - Values can't be returned before a promise is resolved in Angular Material md-autocomplete

问题描述

我在我的项目采用了棱角分明材料 MD-自动完成。在我得到的建议使用 $ HTTP 服务由服务主机通过Ajax调用上市。

  

问题：$ HTTP问题 - 价值不能返回之前的承诺是
  解决了角材料MD-自动完成

  
  

我的要求：我需要使用远程数据更新的建议列表
  在角材料MD-自动完成源 - 阿贾克斯$ http服务

我使用的方法在角料链接 https://material.angularjs.org/最新/演示/自动完成

来源$ C ​​$ C：

方案1：

HTML源代码code：

 ＆LT;必需的MD-柔性自动完成
    MD-输入名称=autocompleteField
    MD-无缓存=真
    MD-投入使用MINLENGTH =3
    MD-输入MAXLENGTH =18
    MD-选择项=的SelectedItem
    MD-搜索文本=SEARCHTEXT
    MD-项目=在querySearch（SEARCHTEXT）项
    MD-项目文本=item.country占位符=输入ID的风格=：;＆gt;中高度38px重要！
    ＆LT; MD-项目模板＆GT;
        ＆LT;跨度类=项目标题＆GT;
            ＆LT;跨度MD-高亮文本=SEARCHTEXTMD-亮点-标志=^ I＆GT; {{item.country}}＆LT; / SPAN＆GT;
    ＆LT; / MD-项目模板＆GT;
＆LT; / MD-自动完成＆GT;
 

AngularJS脚本：

  //绑定自动完成列表时，文本的变化
功能querySearch（查询）{
    变种结果= [];
    $ scope.searchText = $ scope.searchText.trim（）;
    如果（query.length＆GT; = 3）{
        结果= LoadAutocomplete（查询）;
    }
    返回结果;
}//将服务调用列表
功能LoadAutocomplete（ID）{
    变种countryList = [];
    $ HTTP（{
            方法：后
            网址：https://www.bbminfo.com/sample.php
            params：一个{
                令牌：ID
            }
        }）
        .success（功能（响应）{
            countryList = response.records;
        }）;        返回countryList;
}
 

情景2：

HTML与AngularJS来源$ C ​​$ C：

\r

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
＆LT;链接rel =stylesheet属性HREF =htt​​p://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css＆GT;\r
    ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js\"></script>\r
\r
＆LT;！ - 角材质库 - ＆GT;\r
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js\"></script>\r
＆LT;身体GT;\r
\r
＆LT; D​​IV NG-应用=对myAppNG控制器=myCtrl＆GT;\r
\r
＆LT; P＆GT;人来选择：其中; / P＆GT;\r
\r
＆LT; MD-自动完成\r
          NG-禁用=isDisabled\r
          MD-无缓存=非缓存\r
          MD-选择项=将selectedItem\r
          MD-搜索文本的变化=searchTextChange（）\r
          MD-搜索文本=SEARCHTEXT\r
          MD-选择项变化=selectedItemChange（项目）\r
          MD项=项目中的人\r
          MD-项目文本=item.Name\r
          MD-最小长度=0\r
          占位=哪个是你最爱的人？＆GT;\r
        ＆LT; MD-项目模板＆GT;\r
          ＆LT;跨度MD-高亮文本=ctrl.searchTextMD-亮点-标志=^ I＆GT; {{item.country}}＆LT; / SPAN＆GT;\r
        ＆LT; / MD-项目模板＆GT;\r
        ＆LT; MD-未找到＆GT;\r
          没有人匹配{{SEARCHTEXT}}被发现了。\r
        ＆LT; / MD-未找到＆GT;\r
      ＆LT; / MD-自动完成＆GT;\r
      ＆LT; BR /＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本＆GT;\r
    VAR应用= angular.module（'对myApp'，['ngMaterial']）;\r
\r
    app.controller（'myCtrl'，函数（$范围，$ HTTP，$ Q）{\r
\r
        $ scope.searchText =;\r
        $ scope.Person = [];\r
        $ scope.selectedItem = [];\r
        $ scope.isDisabled = FALSE;\r
        $ scope.noCache = FALSE;\r
\r
        $ scope.selectedItemChange =功能（项目）{\r
            警报（变更项目）;\r
        }\r
        $ scope.searchTextChange =功能（）{\r
\r
            $ HTTP（{\r
                方法：POST，\r
                网址：https://www.bbminfo.com/sample.php\r
                params：一个{\r
                    令牌：$ scope.searchText\r
                }\r
            }）\r
            .success（功能（响应）{\r
                $ scope.Person = response.records;\r
            }）;\r
        }\r
\r
    }）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

\r

\r

\r

在情景1 下，我使用该函数来获取过滤列表 MD-项目=在querySearch项目（SEARCHTEXT）。但在情景2 ，我用了一个 $范围变量 MD项=项目中的人

请参阅该快照

快照1：

在这里，我在寻找的印度，但它显示的印度结果。我调试的问题的火狐浏览器Firebug的后，看到上面的快照1 这表明，请求被搜索字词印度通过POST方法发送和我作为一个成功的JSON对象，这是在快照的底部显示的一个匹配项的响应1

  

我在这种情况下，找出问题，价值观不能返回之前
  承诺解决

步骤我想：

案例1 ：我用AngularJS 过滤器在UI MD-项目=在人物项|过滤器： SEARCHTEXT，它给了previously获取远程数据不是当前读取远程数据的筛选列表。而在文本框中退格字符它显示了不正确的建议列表。

案例2 ：我试图通过调用 $范围，以更新UI的变化$适用（） A $ HTTP 服务，但它失败。因为 $ HTTP 服务调用 $范围。$默认适用（），表明它引发我一个错误的错误：[$ rootScope：inprog] ... 即可。最后，在这种尝试失败了。

案例3 ：我创建了一个功能，我手动叫 $范围在函数中使用$（），内功能我手动推POP操作一个虚拟项目是在 MD-自动完成绑定 $范围变量。但是我在这个尝试失败。因为在这里我也得到了相同的输出相同的快照。

 函数Ctrlm（$范围）{
    $ scope.messageToUser =你完成了！
    的setTimeout（函数（）{
        $范围。$应用（函数（）{            $ scope.dummyCntry = [
                {
                    SNO：0，
                    国家：
                }，
            ];            $ scope.Person.push（$ scope.dummyCntry）;            VAR指数= $ scope.Person.indexOf（$ scope.dummyCntry）;
            $ scope.Person.splice（指数，1）;        }）;
    }，10）;
}
 

案例4 ：我做了同样的方法，因为像$ $范围内watchCollection案3。在这里，还我一个挫折。

  $范围。$ watchCollection（'人'，函数（newData，oldDaata）{
    $ scope.dummyCntry = [
                {
                    SNO：0，
                    国家：
                }，
            ];    newData.push（$ scope.dummyCntry）;    VAR指数= newData.indexOf（$ scope.dummyCntry）;
    newData.splice（指数，1）;
}）;
 

案例5 ：除了 $ HTTP 服务的，我用的 jQuery的AJAX调用。在我使用了 $ scope.apply（）来手动更新UI。我在这个尝试失败再次，这里也是我得到了相同的输出。

  $ scope.searchTextChange =功能（）{
    如果（（$ scope.searchText =未定义）及！及（$ scope.searchText = NULL）！）{        $阿贾克斯（{
            输入：GET，
            网址：https://www.bbminfo.com/sample.php?token=+ $ scope.searchText，
            成功：函数（响应）{
                $范围。$应用（函数（）{
                    $ scope.Person = response.records;
                }）;
            }，
            错误：功能（数据）{
                $范围。$应用（函数（）{
                    $ scope.Person = [];
                }）;
            }，
            异步：真
        }）;
    }其他{
        $ scope.Person = [];
    }
}
 

  

在所有的努力我能不能够解决问题。

@georgeawg <一个href=\"http://stackoverflow.com/users/5535245/georgeawg\">http://stackoverflow.com/users/5535245/georgeawg建议我发布一个新的问题，他说，写一个新的疑问，介绍了什么你实际上是试图完成​​，包括所需的行为，到目前为止你做过来解决问题的工作总结，和难点的说明你有解决它。的

这是我发表在参考问题较早

发表1 ：<一href=\"http://www.stackoverflow.com/questions/35624977/md-items-is-not-updating-the-suggesion-list-properly-in-md-autocomplete-angular\">http://www.stackoverflow.com/questions/35624977/md-items-is-not-updating-the-suggesion-list-properly-in-md-autocomplete-angular

发表2 ：<一href=\"http://www.stackoverflow.com/questions/35646077/manually-call-scope-apply-raise-error-on-ajax-call-error-rootscopeinprog\">http://www.stackoverflow.com/questions/35646077/manually-call-scope-apply-raise-error-on-ajax-call-error-rootscopeinprog

  

我的要求：我需要使用远程数据更新的建议列表
  在角材料 MD-自动完成来源 - 阿贾克斯 $ HTTP 服务

请帮我在这方面。

  

用于测试目的使用下面的来源$ C ​​$ C

使用以下网址进行远程数据源： https://bbminfo.com/sample.php ？令牌= IND

远程数据源URL中包含的国家名称列表中。

  

直接测试code。通过点击下面的运行code段按钮。

完整的HTML与AngularJS来源$ C ​​$ C：

\r

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
＆LT;链接rel =stylesheet属性HREF =htt​​p://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js\"></script>\r
\r
＆LT;！ - 角材质库 - ＆GT;\r
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js\"></script>\r
＆LT;身体GT;\r
\r
＆LT; D​​IV NG-应用=对myAppNG控制器=myCtrl＆GT;\r
\r
＆LT; P＆GT;国家来选择：其中; / P＆GT;\r
＆LT; MD-内容＆GT;\r
＆LT; MD-自动完成\r
          NG-禁用=isDisabled\r
          MD-无缓存=非缓存\r
          MD-选择项=将selectedItem\r
          MD-搜索文本的变化=searchTextChange（）\r
          MD-搜索文本=SEARCHTEXT\r
          MD-选择项变化=selectedItemChange（项目）\r
          MD项=项目中的人\r
          MD-项目文本=item.country\r
          MD-最小长度=0\r
          占位=你最喜欢哪个国家？＆GT;\r
        ＆LT; MD-项目模板＆GT;\r
          ＆LT;跨度MD-高亮文本=SEARCHTEXTMD-亮点-标志=^ I＆GT; {{item.country}}＆LT; / SPAN＆GT;\r
        ＆LT; / MD-项目模板＆GT;\r
        ＆LT; MD-未找到＆GT;\r
          没有人匹配{{SEARCHTEXT}}被发现了。\r
        ＆LT; / MD-未找到＆GT;\r
      ＆LT; / MD-自动完成＆GT;\r
      ＆LT; / MD-含量＆GT;\r
      ＆LT; BR /＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本＆GT;\r
    VAR应用= angular.module（'对myApp'，['ngMaterial']）;\r
\r
    app.controller（'myCtrl'，函数（$范围，$ HTTP，$ Q）{\r
\r
        $ scope.searchText =;\r
        $ scope.Person = [];\r
        $ scope.selectedItem = [];\r
        $ scope.isDisabled = FALSE;\r
        $ scope.noCache = FALSE;\r
\r
        $ scope.selectedItemChange =功能（项目）{\r
            警报（变更项目）;\r
        }\r
        $ scope.searchTextChange =功能（）{\r
\r
            $ HTTP（{\r
                方法：后\r
                网址：https://www.bbminfo.com/sample.php\r
                params：一个{\r
                    令牌：$ scope.searchText\r
                }\r
            }）\r
            .success（功能（响应）{\r
$ scope.Person = response.records;\r
            }）;\r
        }\r
\r
    }）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

\r

\r

\r

解决方案

@KevinB <一个href=\"http://stackoverflow.com/users/400654/kevin-b\">http://stackoverflow.com/users/400654/kevin-b - 给人的理念如何落实。我真的很感谢他......再一次非常感谢凯文...

我得到了确切的解决方案，我需要什么。

来源$ C ​​$ c是

\r

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
＆LT;链接rel =stylesheet属性HREF =htt​​p://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js＆GT;＆下; /脚本＆GT;\r
＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js\"></script>\r
\r
＆LT;！ - 角材质库 - ＆GT;\r
＆LT;脚本src=\"http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js\"></script>\r
＆LT;身体GT;\r
\r
＆LT; D​​IV NG-应用=对myAppNG控制器=myCtrl＆GT;\r
\r
＆LT; P＆GT;国家来选择：其中; / P＆GT;\r
＆LT; MD-内容＆GT;\r
＆LT; MD-自动完成\r
          NG-禁用=isDisabled\r
          MD-无缓存=非缓存\r
          MD-选择项=将selectedItem\r
          MD-搜索文本=SEARCHTEXT\r
          MD-项目=在searchTextChange（SEARCHTEXT）项\r
          MD-项目文本=item.country\r
          MD-最小长度=0\r
          占位=你最喜欢哪个国家？＆GT;\r
        ＆LT; MD-项目模板＆GT;\r
          ＆LT;跨度MD-高亮文本=SEARCHTEXTMD-亮点-标志=^ I＆GT; {{item.country}}＆LT; / SPAN＆GT;\r
        ＆LT; / MD-项目模板＆GT;\r
        ＆LT; MD-未找到＆GT;\r
          没有人匹配{{SEARCHTEXT}}被发现了。\r
        ＆LT; / MD-未找到＆GT;\r
      ＆LT; / MD-自动完成＆GT;\r
      ＆LT; / MD-含量＆GT;\r
      ＆LT; BR /＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本＆GT;\r
    VAR应用= angular.module（'对myApp'，['ngMaterial']）;\r
\r
    app.controller（'myCtrl'，函数（$范围，$ HTTP，$ Q，GetCountryService）{\r
\r
        $ scope.searchText =;\r
        $ scope.Person = [];\r
        $ scope.selectedItem = [];\r
        $ scope.isDisabled = FALSE;\r
        $ scope.noCache = FALSE;\r
\r
        $ scope.selectedItemChange =功能（项目）{\r
            //警报（变更项目）;\r
        }\r
        $ scope.searchTextChange =功能（STR）{\r
返回GetCountryService.getCountry（STR）;\r
        }\r
\r
    }）;\r
\r
app.factory（'GetCountryService'，函数（$ HTTP，$ Q）{\r
        返回{\r
            getCountry：功能（STR）{\r
                //将$ HTTP API是基于由$ Q服务公开的递延/ API的承诺\r
                //所以它在默认情况下会返回一个承诺我们\r
VAR URL =htt​​ps://www.bbminfo.com/sample.php?token=\"+str;\r
                返回$ http.get（URL）\r
                    。然后（功能（响应）{\r
                        如果（typeof运算response.data.records ==='对象'）{\r
                            返回response.data.records;\r
                        }其他{\r
                            //无效响应\r
                            返回$ q.reject（response.data.records）;\r
                        }\r
\r
                    }，函数（响应）{\r
                        // 出了些问题\r
                        返回$ q.reject（response.data.records）;\r
                    }）;\r
            }\r
        };\r
    }）;\r
＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT;

\r

\r

\r

I'm using Angular Material md-autocomplete in my project. In that I'm getting the suggest listing from the Service Host via ajax call using $http service.

Issue: $http issue - Values can't be returned before a promise is resolved in Angular Material md-autocomplete

My Requirement: I need an updated Suggestion List using remote data sources in Angular Material md-autocomplete - Ajax $http service.

I used the approach as mentioned in Angular Material link https://material.angularjs.org/latest/demo/autocomplete

Source Code:

Scenario 1:

HTML Source Code:

<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.country" Placeholder="Enter ID" style="height:38px !important;">
    <md-item-template>
        <span class="item-title">
            <span md-highlight-text="searchText" md-highlight-flags="^i"> {{item.country}} </span>
    </md-item-template>
</md-autocomplete>

AngularJS Script:

//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 LoadAutocomplete(id) {
    var countryList = [];
    $http({
            method: "post",
            url: "https://www.bbminfo.com/sample.php",
            params: {
                token: id
            }
        })
        .success(function (response) {
            countryList = response.records;
        });

        return countryList;
}

Scenario 2:

HTML with AngularJS Source Code:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Person to Select:</p>

<md-autocomplete
          ng-disabled="isDisabled"
          md-no-cache="noCache"
          md-selected-item="selectedItem"
          md-search-text-change="searchTextChange()"
          md-search-text="searchText"
          md-selected-item-change="selectedItemChange(item)"
          md-items="item in Person"
          md-item-text="item.Name"
          md-min-length="0"
          placeholder="Which is your favorite Person?">
        <md-item-template>
          <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.country}}</span>
        </md-item-template>
        <md-not-found>
          No Person matching "{{searchText}}" were found.
        </md-not-found>
      </md-autocomplete>
      <br/>
</div>

<script>
    var app = angular.module('myApp', ['ngMaterial']);

    app.controller('myCtrl', function ($scope, $http, $q) {

        $scope.searchText = "";
        $scope.Person = [];
        $scope.selectedItem = [];
        $scope.isDisabled = false;
        $scope.noCache = false;

        $scope.selectedItemChange = function (item) {
            alert("Item Changed");
        }
        $scope.searchTextChange = function () {

            $http({
                method: "POST",
                url: "https://www.bbminfo.com/sample.php",
                params: {
                    token: $scope.searchText
                }
            })
            .success(function (response) {
                $scope.Person = response.records;
            });
        }

    });
</script>
</body>
</html>

In Scenario 1, I used the function to fetch the filtered list md-items="item in querySearch(searchText)". But in Scenario 2, I used a $scope variable md-items="item in Person"

Kindly refer the Snapshots

Snapshot 1:

Here I'm searching for indian but it shows the result for india. I debugged the issue in Firefox Browser Firebug, see the above Snapshot 1 it shows, the request was sent for the search term indian via POST Method and I got the response of one matching items as a JSON Object successfully, which is shown in the bottom of SnapShot 1

The issue I find out in this case, the Values can't be returned before a promise is resolved

Steps I tried:

Case 1: I used the AngularJS filter in UI md-items="item in Person | filter: searchText", it gives the filtered list of previously fetched remote data not a currently fetched remote data. While on Backspacing the character in the textbox it shows the improper suggestion list.

Case 2: I tried to update the changes in UI by calling $scope.$apply() within a $http service, but it fails. Because $http service calling the $scope.$apply() by default, show it throws me an error Error: [$rootScope:inprog].... Finally in this attempt I failed.

Case 3: I created a function, within the function I'm manually called the $scope.$apply(), within the function I manually pushed and poped one dummy item to the $scope variable which is bind in the md-autocomplete. But I failed in this attempt. Because here also I got a same output as same as in the snapshot.

function Ctrlm($scope) {
    $scope.messageToUser = "You are done!";
    setTimeout(function () {
        $scope.$apply(function () {

            $scope.dummyCntry = [
                {
                    sno: 0,
                    country: ""
                },
            ];

            $scope.Person.push($scope.dummyCntry);

            var index = $scope.Person.indexOf($scope.dummyCntry);
            $scope.Person.splice(index, 1);

        });
    }, 10);
}

Case 4: I did the same approach as like "Case 3" within the $scope.$watchCollection. Here also I got a setback.

$scope.$watchCollection('Person', function (newData, oldDaata) {
    $scope.dummyCntry = [
                {
                    sno: 0,
                    country: ""
                },
            ];

    newData.push($scope.dummyCntry);

    var index = newData.indexOf($scope.dummyCntry);
    newData.splice(index, 1);
});

Case 5: Instead of $http service, I used the jquery ajax call. In that I used the $scope.apply() to update the UI manually. I failed in this attempt once again, here also I got the same output.

$scope.searchTextChange = function () {
    if (($scope.searchText != undefined) && ($scope.searchText != null)) {

        $.ajax({
            type: 'GET',
            url: "https://www.bbminfo.com/sample.php?token=" + $scope.searchText,
            success: function (response) {
                $scope.$apply(function () {
                    $scope.Person = response.records;
                });
            },
            error: function (data) {
                $scope.$apply(function () {
                    $scope.Person = [];
                });
            },
            async: true
        });


    } else {
        $scope.Person = [];
    }
}

In all the attempts I can't able to fix the issue.

@georgeawg http://stackoverflow.com/users/5535245/georgeawg suggested me to post a new question, he stated, "write a new question that describes what you are actually trying to accomplish, include the desired behavior, a summary of the work you've done so far to solve the problem, and a description of the difficulty you are having solving it."

Reference Questions which I was posted in the earlier

Post 1: http://www.stackoverflow.com/questions/35624977/md-items-is-not-updating-the-suggesion-list-properly-in-md-autocomplete-angular

Post 2: http://www.stackoverflow.com/questions/35646077/manually-call-scope-apply-raise-error-on-ajax-call-error-rootscopeinprog

My Requirement: I need an updated Suggestion List using remote data sources in Angular Material md-autocomplete - Ajax $http service.

Kindly assist me in this regards.

For Testing Purpose Use the following Source Code

Use the following URL for Remote Data Source: https://bbminfo.com/sample.php?token=ind

The Remote Data Source URL contains the List of Countries Name.

Directly Test the Code by click the below Run Code Snippet button.

Complete HTML with AngularJS Source Code:

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Country to Select:</p>
<md-content>
<md-autocomplete
          ng-disabled="isDisabled"
          md-no-cache="noCache"
          md-selected-item="selectedItem"
          md-search-text-change="searchTextChange()"
          md-search-text="searchText"
          md-selected-item-change="selectedItemChange(item)"
          md-items="item in Person"
          md-item-text="item.country"
          md-min-length="0"
          placeholder="Which is your favorite Country?">
        <md-item-template>
          <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.country}}</span>
        </md-item-template>
        <md-not-found>
          No Person matching "{{searchText}}" were found.
        </md-not-found>
      </md-autocomplete>
      </md-content>
      <br/>
</div>

<script>
    var app = angular.module('myApp', ['ngMaterial']);

    app.controller('myCtrl', function ($scope, $http, $q) {

        $scope.searchText = "";
        $scope.Person = [];
        $scope.selectedItem = [];
        $scope.isDisabled = false;
        $scope.noCache = false;

        $scope.selectedItemChange = function (item) {
            alert("Item Changed");
        }
        $scope.searchTextChange = function () {

            $http({
                method: "post",
                url: "https://www.bbminfo.com/sample.php",
                params: {
                    token: $scope.searchText
                }
            })
            .success(function (response) {
				$scope.Person = response.records;
            });
        }

    });
</script>
</body>
</html>

解决方案

@KevinB http://stackoverflow.com/users/400654/kevin-b - Gives the Idea how to implement. I really thank him... Once again thanks alot Kevin...

I got the Exact solution, what I need.

The Source Code is

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>

<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl"> 

<p>Country to Select:</p>
<md-content>
<md-autocomplete
          ng-disabled="isDisabled"
          md-no-cache="noCache"
          md-selected-item="selectedItem"
          md-search-text="searchText"
          md-items="item in searchTextChange(searchText)"
          md-item-text="item.country"
          md-min-length="0"
          placeholder="Which is your favorite Country?">
        <md-item-template>
          <span md-highlight-text="searchText" md-highlight-flags="^i">{{item.country}}</span>
        </md-item-template>
        <md-not-found>
          No Person matching "{{searchText}}" were found.
        </md-not-found>
      </md-autocomplete>
      </md-content>
      <br/>
</div>

<script>
    var app = angular.module('myApp', ['ngMaterial']);

    app.controller('myCtrl', function ($scope, $http, $q, GetCountryService) {

        $scope.searchText = "";
        $scope.Person = [];
        $scope.selectedItem = [];
        $scope.isDisabled = false;
        $scope.noCache = false;

        $scope.selectedItemChange = function (item) {
            //alert("Item Changed");
        }
        $scope.searchTextChange = function (str) {
			return GetCountryService.getCountry(str);
        }

    });
	
	app.factory('GetCountryService', function ($http, $q) {
        return {
            getCountry: function(str) {
                // the $http API is based on the deferred/promise APIs exposed by the $q service
                // so it returns a promise for us by default
				var url = "https://www.bbminfo.com/sample.php?token="+str;
                return $http.get(url)
                    .then(function(response) {
                        if (typeof response.data.records === 'object') {
                            return response.data.records;
                        } else {
                            // invalid response
                            return $q.reject(response.data.records);
                        }

                    }, function(response) {
                        // something went wrong
                        return $q.reject(response.data.records);
                    });
            }
        };
    });
</script>
</body>
</html>

这篇关于$ HTTP问题 - 值不能承诺前归还在角材料MD-自动完成解决的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！