Asynchrone Postanforderung und Zuweisung zurückgegebener Daten

Question

Also lerne ich AngularJS und ich versuche meine nicht so schöne Methode zu ersetzen, Daten von einem Webservice zu bekommen und sie in Echtzeit mit einer Variablen zu verknüpfen, die mit ng-repeat verknüpft wird. Die Sache, die ich am meisten erreichen möchte, ist asynchroner Anruf. Ich kann es jetzt nicht verwenden, da AJAX Daten zurückgibt, nachdem Daten an eine Bereichsvariable zurückgegeben wurden.

Meine aktuellen Code sieht wie folgt aus:

var app = angular.module("Listt", []); 

    app.controller(
     "ListtController", 
    function ($scope) { 
     $scope.results = { 
      response: [{ 
       name: '', 
       surname: '', 
       age: '' 
      }] 
     }; 
     $scope.searchListt = function() { 
      loadingAnimationStart(); 
      $scope.results = getListt(); 
      loadingAnimationStop(); 
     }; 

     function getListt() { 
      var returnData; 
      $.ajax({ 
       url: 'listt', 
       type: "POST", 
       async: false, 
       data: { 
        age_from: $('[name="age-start"]').val(), 
        age_to: $('[name="age-end"]').val() 
       }, 
       success: function (data) {     
        returnData = JSON.parse(data); 
       } 
      }); 
      return returnData; 
     } 
    } 
); 

Und in HTML anzeigen Ich Suchfunktion unter Verwendung ng Sie auf

<button ng-click="searchListt()">Search</button> 

Answer 1

Wenn Sie angularJs verwenden, dann sollten Sie $http.post

var app = angular.module("Listt", []); 

     app.controller(
      "ListtController", 
     function ($scope) { 
      $scope.results = { 
       response: [{ 
        name: '', 
        surname: '', 
        age: '' 
       }] 
      }; 
      $scope.searchListt = function() { 
       loadingAnimationStart(); 
       $scope.results = getListt(); 
       loadingAnimationStop(); 
      }; 

      function getListt() { 
       $scope.returnData; 
       $http.post(url, data, config).then(function (response) { 
       $scope.returnData = JSON.parse(response) 
       },function (response) { 
       alert("ERROR") 
       }); 
      } 
     } 
    ); 

Answer 2

ich Ihren Code hier aktualisiert. getListt(); Funktionsaufruf von searchListt Funktion. Sobald Ajax-Aufruf wird der Erfolg dann zuweisen Antwortdaten auf $scope.results

var app = angular.module("Listt", []); 

    app.controller(
     "ListtController", 
    function ($scope) { 
     $scope.results = { 
      response: [{ 
       name: '', 
       surname: '', 
       age: '' 
      }] 
     }; 
     $scope.searchListt = function() { 
      loadingAnimationStart(); 
      getListt(); 

     }; 

     function getListt() { 
      $.ajax({ 
       url: 'listt', 
       type: "POST", 
       async: false, 
       data: { 
        age_from: $('[name="age-start"]').val(), 
        age_to: $('[name="age-end"]').val() 
       }, 
       success: function (data) {     
        $scope.results = JSON.parse(data); 
        loadingAnimationStop(); 
       } 
      }); 
     } 
    } 
); 

Answer 3

Warum Sie direkt Suchliste Funktion aufrufen CANY und Variable nehmen. Ich denke, es wird funktionieren.

$scope.results=[]; 

$scope.searchListt = function() { 

      loadingAnimationStart(); 
      $.ajax({ 
       url: 'listt', 
       type: "POST", 
       async: false, 
       data: { 
        age_from: $('[name="age-start"]').val(), 
        age_to: $('[name="age-end"]').val() 
       }, 
       success: function (data) {     
        $scope.results = JSON.parse(data); 
        loadingAnimationStop(); 
       } 


      }); 
      loadingAnimationStop(); 
     }