如何在JavaScript全局范围访问函数内变量并用于AngularJS过滤器？

1. 调整JavaScript代码（结合AngularJS控制器） #

原代码中selectedLevel被限制在事件回调的局部作用域内，外部无法访问。在AngularJS体系下，应该把状态托管到控制器的$scope上，让视图和过滤器能直接获取到值：

angular.module('yourApp').controller('UserController', function($scope) {
  // 初始化默认值，对应原过滤器里的5000
  $scope.selectedLevel = 5000;

  const levelButtons = document.querySelectorAll('input[name="level"]');
  Array.prototype.forEach.call(levelButtons, function(btn) {
    btn.addEventListener('change', function(){
      // 用$apply触发Angular的digest循环，确保视图同步更新
      $scope.$apply(() => {
        $scope.selectedLevel = parseInt(this.value, 10); // 转成数字适配数值比较
      });
    });
  });
});

2. 修改AngularJS视图中的过滤器 #

把过滤器里硬编码的5000替换为selectedLevel：

<tr ng-repeat="user in users | filter : searchtxt | filter: greaterThan('Fees', selectedLevel)">
  <td class="Program_Name">{{user.Program_Name}}</td>
  <td class="Institute">{{user.Institute}}</td>
  <td class="Fees">{{user.Fees}}</td>
</tr>

补充：确保greaterThan过滤器参数兼容 #

你的过滤器需要支持接收数值参数，示例实现如下：

angular.module('yourApp').filter('greaterThan', function() {
  return function(items, propName, threshold) {
    return items.filter(item => parseInt(item[propName], 10) > threshold);
  };
});

不建议直接用全局变量（比如window.selectedLevel），这种做法会破坏AngularJS的状态管理规范，容易引发命名冲突和维护问题，用$scope托管状态是更合理的方案。

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