AngularJS how to use $watch variables with $http?

Question

I am trying to change a variable by using a filter. Which looks like this.

<select ng-init="inputStatus='ALL'" ng-model="inputStatus">
  <option value="ALL">ALL</option>
  <option value="NEW">NEW</option>
  <option value="RENEW">RENEW</option>
  <option value="FINISHED">FINISHED</option>
  <option value="FAILED">FAILED</option>
</select>

As you can see each time I select a new option the variable will change.

This is my $watch function.

var testValue = '';

$scope.$watch('inputStatus', function(val) {

  if (val) {
   testValue = val;
  }
}, true);

console.log(testValue);

I need to use testValue here in order to filter through the data.

$http.get("/api/v1/websites/?limit=" + $scope.main.limit + "&offset=" + $scope.main.offset + "&status=" + testValue)
then(function successCallback(result) {
    $scope.websites = result.data.results;
});

How can I do that?

are the $watch call and the $http call in different controllers/scopes? — Omar Einea
– Omar Einea, Commented Jan 12, 2018 at 11:11
I think you need to describe what you are trying to do instead. Your <select> can have ng-change="doSomething(inputStatus)" . It also depends on where testValue is located and if $http can reach it (otherwise consider using Service/Factory) — Aleksey Solovey
– Aleksey Solovey, Commented Jan 12, 2018 at 11:16

georgeawg · Accepted Answer · 2018-01-12 18:00:27Z

Instead of $watch, use the ng-change directive:

<select ng-init="inputStatus='ALL'" ng-model="inputStatus"
        ng-change="updateWebsite(inputStatus)">
  <option value="ALL">ALL</option>
  <option value="NEW">NEW</option>
  <option value="RENEW">RENEW</option>
  <option value="FINISHED">FINISHED</option>
  <option value="FAILED">FAILED</option>
</select>

In the controller:

$scope.updateWebsites = updateWebsites;

function updateWebsites(status) {
    var url = "/api/v1/websites";
    var params = { limit: $scope.main.limit,
                   offset: $scope.main.offset,
                   status: status };

    var config = { params: params };

    $http.get(url, config)
      .then(function successHandler(response) {
         $scope.websites = response.data.results;
    }).catch(function errorHandler(response) {
         console.log("ERROR", response.status)
    });
}

Collectives™ on Stack Overflow

AngularJS how to use $watch variables with $http?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related