简体   繁体   中英

Angularjs not updating data inside $http.get

Here is my code:

$scope.t = ["lapi", "laptop"];

$scope.$watch('search', function(newval, oldval){

$scope.alldata = [];

$http.get('http://localhost/serve/?p=12345').

    then(function(data){

        var x = Math.floor((Math.random() * 2));

        $scope.alldata.push($scope.t[x])

    },

    function(){

        console.log("error")

    });

    return $scope.alldata;

});

every time it updating with previous result.

if i do $scope.$apply() after push ,

it is showing Error: [$rootScope:inprog]

I don't know how to update this data.

 <!DOCTYPE> <html ng-app="test"> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular-route.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script> <script src="sys.js"></script> </head> <body ng-controller="main"> <p>Angularjs Test</p> <input type="text" ng-model="search" typeahead="data for data in alldata | filter:$viewValue | limitTo:10"autofocus> </body> </html>

 var app=angular.module('test', ["ui.bootstrap"]); app.controller("main", function($scope, $http, $timeout, $q){ console.log("main"); var timer = false; $scope.search = ""; $scope.t = ["vijay", "vijaypal"]; $scope.alldata = []; $scope.getLog = function(){ console.log("rootscope called"); }; $scope.$watch('search', function(newval, oldval){ if(timer) { $timeout.cancel(timer); } timer = $timeout(function(){ $scope.alldata = []; var rd='&_rd='+new Date().getTime(); var deferred = $q.defer(); $http.get("http://rec.cloudinfra.in/rec_serve_property/?p=3903405"+rd). then( function(data) { var x = Math.floor((Math.random() * 2)); $scope.alldata.push($scope.t[x]); deferred.resolve($scope.alldata) console.log("start:", $scope.alldata); return deferred.promise; }, function (){ console.log("error"); }); }, 100); console.log("end:", $scope.alldata); }); });

check in console log you will get the problem

looks like cache issue and try to change the request to

var rd='&_rd='+new Date().getTime();

$http.get('http://localhost/serve/?p=12345'+rd)

so you can have different request everytime

The syntax is $http.get().success(function(){}).error(function(){}); as far as I am aware of.

$scope.t = ["lapi", "laptop"];

$scope.$watch('search', function(newval, oldval){

$scope.alldata = [];

$http.get('http://localhost/serve/?p=12345').success(function($data) {
   //$data is the data stripped from the response! unlike XMLHttpRequest
   var x = Math.ceil(Math.random() * 2) - 1; //This wasn't an integer
   $scope.alldata.push($scope.t[x]);
   //no need to return
}).error(function() {
   console.log('error');
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM