javascript - AngularJS 如何将 $watch 变量与 $http 一起使用？

Question

我正在尝试使用过滤器更改变量。看起来像这样。

<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>

正如您所看到的，每次我选择一个新选项时，变量都会发生变化。

这是我的 $watch 函数。

var testValue = '';

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

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

console.log(testValue);

我需要在这里使用 testValue 来过滤数据。

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

我怎样才能做到这一点？

Answer 1

使用 ng-change 而不是 $watch指令:

<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>

在 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)
    });
}