$ http Problem - Werte können nicht zurückgegeben werden, bevor ein Versprechen in md-autocomplete Angular Material @ gelöst wurd
Ich verwende Winkelmaterialmd-autocomplete in meinem Projekt. Darin erhalte ich die Vorschlagsliste vom Service Host über einen Ajax-Aufruf mit$http Bedienung
Proble: $ http Problem - Werte können nicht zurückgegeben werden, bevor ein Versprechen in @ gelöst wurmd-autocomplete Winkelmaterial
Meine Anforderung: Ich benötige eine aktualisierte Vorschlagsliste mit entfernten Datenquellen inmd-autocomplete Winkelmaterial - Ajax$http Bedienung
Ich habe den in Angular Material link @ genannten Ansatz verwendehttps: //material.angularjs.org/latest/demo/autocomplet
Quellcode
Szenario 1
HTML-Quellcode:
<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;
}
Szenario 2:
HTML mit AngularJS-Quellcode:
<!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>ImSzenario , Ich habe die Funktion benutzt, um die gefilterte Liste abzurufenmd-items="item in querySearch(searchText)". Aber inScenario 2, Ich habe ein @ verwend$scope variablemd-items="item in Person"
Bitte verweisen Sie auf die Snapshots
Snapshot 1:
Hier bin ich auf der Suche nachindisc aber es zeigt das Ergebnis fürIndie. Ich habe das Problem in @ behob Firefox Browser Firebug, siehe obenSnapshot 1 es wird angezeigt, dass die Anfrage für den Suchbegriff gesendet wurdeindisc über die POST-Methode und ich habe die Antwort eines übereinstimmenden Elements als JSON-Objekt erfolgreich erhalten. Dies wird unten in @ angezeigSnapShot 1
Das Problem, das ich in diesem Fall herausfinde, ist, dass die Werte nicht zurückgegeben werden können, bevor ein Versprechen gelöst wurde
Schritte, die ich versucht habe:
Fall : Ich habe das AngularJS @ benutfilter in der Benutzeroberflächemd-items="item in Person | filter: searchText" gibt die gefilterte Liste der zuvor abgerufenen entfernten Daten an, nicht die aktuell abgerufenen entfernten Daten. Beim Zurücksetzen des Zeichens in das Textfeld wird die falsche Vorschlagsliste angezeigt.
Case 2: Ich habe versucht, die Änderungen in der Benutzeroberfläche durch Aufrufen von @ zu aktualisiere$scope.$apply() innerhalb eines$http Service, aber es schlägt fehl. Weil$http service ruft die$scope.$apply() standardmäßig, zeige es mir einen FehlerError: [$ rootScope: inprog] .... Endlich bei diesem Versuch bin ich gescheitert.
Case 3: Ich habe eine Funktion erstellt, innerhalb der Funktion, die ich manuell als @ bezeichn$scope.$apply(), innerhalb der Funktion habe ich manuell einen Dummy-Eintrag in das @ eingefü$scope Variable, die im @ gebunden imd-autocomplete. Aber ich habe bei diesem Versuch versagt. Denn auch hier habe ich die gleiche Ausgabe wie im Schnappschuss.
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: Ich habe den gleichen Ansatz wie in "Fall 3" innerhalb des Bereichs "$ scope. $ WatchCollection" ausgeführt. Auch hier habe ich einen Rückschlag bekommen.
$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: Anstatt von$http Service, ich habe dasjquery ajax call. Dabei habe ich das$scope.apply(), um die Benutzeroberfläche manuell zu aktualisieren. Ich bin bei diesem Versuch noch einmal gescheitert, auch hier habe ich die gleiche Ausgabe bekommen.
$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 = [];
}
}
Bei allen Versuchen kann ich das Problem nicht beheben.
@ georgeawghttps: //stackoverflow.com/users/5535245/georgeaw schlug mir vor, eine neue Frage zu stellen, sagte er: "schreiben Sie eine neue Frage, die beschreibt, was Sie tatsächlich erreichen möchten, und geben Sie das gewünschte Verhalten, eine Zusammenfassung der bisher geleisteten Arbeit zur Lösung des Problems und eine Beschreibung der Schwierigkeiten an, die Sie bei der Lösung des Problems haben."
Referenz Fragen, die ich in den früheren @ gepostet ha
Meine Anforderung: Ich benötige eine aktualisierte Vorschlagsliste mit entfernten Datenquellen in Angular Materialmd-autocomplete - Ajax$http Bedienung
Bitte helfen Sie mir in dieser Hinsicht.
Zum Testen verwenden Sie den folgenden Quellcode
Verwenden Sie die folgende URL für die Remote-Datenquelle:https: //bbminfo.com/sample.php? token = ind
Die URL der Remote-Datenquelle enthält die Liste der Ländernamen.
esten Sie den Code direkt, indem Sie auf das unten stehende Symbol klickeRun Code Snippet Taste
HTML mit AngularJS-Quellcode vervollständigen:
<!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>