AngularJS如何结合$watch与$http实现下拉选框数据筛选？

我来帮你梳理下问题，然后给出两种实际项目里常用的可行解决方案：

首先，你当前代码的核心问题有两个：

1. console.log(testValue) 写在了$watch外面，它只会在控制器初始化时执行一次，此时testValue还是空字符串，根本看不到$watch更新后的值；
2. 你没有在inputStatus变化时触发$http请求，所以选了新选项也不会更新数据。

下面是两种优化方案，推荐用第二种，更符合Angular的风格：

方案一：用$watch监听变量变化（保留你原有的思路） #

我们把请求封装成函数，在$watch里调用，同时修正日志的位置：

// 可以直接用$scope.inputStatus，没必要额外定义testValue，除非你有特殊需求
$scope.inputStatus = 'ALL'; // 和ng-init保持一致，也可以保留ng-init

// 封装请求为可复用函数
function loadWebsiteData(status) {
  $http.get(`/api/v1/websites/?limit=${$scope.main.limit}&offset=${$scope.main.offset}&status=${status}`)
    .then(function successCallback(result) {
      $scope.websites = result.data.results;
    })
    .catch(function errorCallback(err) {
      // 别忘了加错误处理，比如给用户提示
      console.error('加载网站数据失败:', err);
    });
}

// 页面初始化时先加载一次ALL状态的数据
loadWebsiteData($scope.inputStatus);

// 监听inputStatus的变化
$scope.$watch('inputStatus', function(newStatus, oldStatus) {
  // 确保状态确实变化了再触发请求
  if (newStatus && newStatus !== oldStatus) {
    loadWebsiteData(newStatus);
    // 如果确实需要testValue，在这里赋值
    // testValue = newStatus;
    console.log('当前选中状态:', newStatus); // 日志放这里才能看到更新后的值
  }
}, true); // 你原来的deep watch如果不需要可以去掉，监听字符串不需要deep

方案二：用ng-change指令（更推荐，代码更简洁） #

这种方式不用写$watch，直接在select标签上绑定变化事件，更符合Angular的声明式编程思路：

第一步：修改HTML模板 #

给select加上ng-change指令，触发我们定义的请求函数：

<select ng-init="inputStatus='ALL'" ng-model="inputStatus" ng-change="loadWebsiteData(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>

第二步：修改控制器代码 #

$scope.inputStatus = 'ALL';

// 把请求函数挂载到$scope上，让模板能调用
$scope.loadWebsiteData = function(status) {
  $http.get(`/api/v1/websites/?limit=${$scope.main.limit}&offset=${$scope.main.offset}&status=${status}`)
    .then(function successCallback(result) {
      $scope.websites = result.data.results;
    })
    .catch(function(err) {
      console.error('加载数据出错:', err);
    });
};

// 页面初始化时加载初始数据
$scope.loadWebsiteData($scope.inputStatus);

为什么推荐方案二？ #

因为ng-change是专门用来监听表单元素变化的指令，代码更直观，不需要手动写$watch，减少了不必要的监听逻辑，后期维护也更简单。

不管用哪种方案，记得加上错误处理，避免请求失败时页面没有任何反馈哦～

内容的提问来源于stack exchange，提问作者ottomd