javascript - Angular 智能表过滤器状态保存下拉列表无法正确恢复

Question

我已按照文档中关于保持过滤器状态的说明进行操作。 (http://plnkr.co/edit/ekwiNt?p=preview)

当重新加载页面时，表状态(包括过滤器)被恢复，但是 <select>框显示为空白，即使过滤器确实有效。

文本过滤器工作正常。

Angular 1.4.7智能表 2.1.5

这是个笨蛋 https://embed.plnkr.co/fK6WfZSZrgSeIG732R2X/

.directive('stPersist', function() {
  return {
    require: '^stTable',
    link: function(scope, element, attr, ctrl) {
      var nameSpace = attr.stPersist;

      //save the table state every time it changes
      scope.$watch(function() {
        return ctrl.tableState();
      }, function(newValue, oldValue) {
        if (newValue !== oldValue) {
          localStorage.setItem(nameSpace, JSON.stringify(newValue));
        }
      }, true);

      //fetch the table state when the directive is loaded
      if (localStorage.getItem(nameSpace)) {
        var savedState = JSON.parse(localStorage.getItem(nameSpace));
        var tableState = ctrl.tableState();

        angular.extend(tableState, savedState);
        ctrl.pipe();

      }

    }
  };
});;

Answer 1

我会在 Select 语句中添加 ngSelected 属性:

<select st-search="category" st-input-event="change" class="input-sm form-control">
    <option value="">All</option>
    <option data-ng-repeat="category in categories" ng-selected="category.id == selectedCategory" value="{{category.id}}">{{category.name}}</option>
</select>

并从存储中检索类别值:

//fetch the table state when the directive is loaded
if (localStorage.getItem(nameSpace)) {
    var savedState = JSON.parse(localStorage.getItem(nameSpace));
    var tableState = ctrl.tableState();

    // retrieve category filter (Note: it won't be present when 'All' is selected)
    scope.selectedCategory = savedState.search.predicateObject.category || "";

    angular.extend(tableState, savedState);
    ctrl.pipe();
}

如果您想可视化数据是如何持久化的(以及我是如何想出“savedState.search.predicateObject.category”的)，那么将以下 JS 添加到上面:

console.log(JSON.stringify(savedState));

https://plnkr.co/edit/bMbIVJ8OkEnfoYbWidu3?p=preview