AngularJS UI Router与Smart-Table集成：多筛选状态保存问题咨询

嘿，刚接触AngularJS不用慌，这个需求其实挺常见的，咱们一步步来拆解：

核心思路 #

UI Router确实需要你手动配置状态参数，但不用搞复杂的新路由，只需要在现有展示表格的路由里加params来存储筛选状态就行，下面是具体的实现步骤：

1. 配置UI Router状态，添加筛选参数 #

在你的路由配置里，给当前展示Smart-Table的状态添加可序列化的参数，用来存储复选框的选中值：

$stateProvider.state('your.table.page', {
  url: '/table-view',
  templateUrl: 'table-template.html',
  params: {
    // 用数组存选中的筛选值，squash参数确保无筛选时URL不显示空参数
    selectedFilters: { value: [], squash: true }
  },
  controller: 'TableController as vm'
});

2. 绑定复选框与路由参数同步 #

在模板里把复选框的选中状态绑定到控制器变量，同时在控制器里监听这个变量的变化，同步到路由参数：

<!-- 示例复选框组 -->
<div ng-repeat="option in vm.filterOptions">
  <label>
    <input type="checkbox" 
           ng-model="vm.selectedFilters[$index]" 
           ng-true-value="{{option.value}}" 
           ng-false-value="''">
    {{option.label}}
  </label>
</div>

控制器里的同步逻辑：

app.controller('TableController', function($scope, $state) {
  var vm = this;
  // 初始化：从路由参数读取之前的筛选状态，没有则为空数组
  vm.selectedFilters = $state.params.selectedFilters;

  // 监听筛选状态变化，同步到路由（加防抖避免频繁触发）
  var syncToRouter = _.debounce(function(newVal) {
    // 过滤掉未选中的空值
    var validFilters = newVal.filter(val => val);
    // 用当前状态的相对路径更新参数，不触发页面重载
    $state.go('.', { selectedFilters: validFilters }, { notify: false, location: 'replace' });
  }, 300);

  $scope.$watchCollection('vm.selectedFilters', syncToRouter);
});

3. 让Smart-Table使用路由参数做筛选 #

Smart-Table支持自定义筛选函数，直接把路由里的筛选参数作为筛选依据即可：

// 控制器里定义表格筛选逻辑
vm.tableFilter = function(row) {
  // 无选中筛选时，全部显示
  if (vm.selectedFilters.length === 0) return true;
  // 匹配行数据里的对应字段（这里假设你的数据有filterTag字段）
  return vm.selectedFilters.includes(row.filterTag);
};

模板里绑定筛选函数：

<table st-table="vm.displayedData" st-safe-src="vm.largeDataset" st-filter="vm.tableFilter">
  <!-- 表格列定义 -->
</table>

4. 页面刷新时自动恢复状态 #

因为筛选状态存在URL的路由参数里，页面刷新时AngularJS会自动从$state.params读取值，只要你在控制器初始化时把这个值赋值给筛选变量，就能自动恢复之前的筛选状态。

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