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

如果您想要查看数据的持久化方式（以及我如何提出＆saved®.search.predicateObject.category＆＃39;），请将以下JS添加到上面：

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

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

Answer 2

这是我解决它的方式：对于search.predicateObject的每个属性，它在使用＆＃34; _SelectedValue＆＃34;添加的范围内动态创建一个属性，因此每个控件都可以在html中绑定它。

      <select data-st-search="AbiSearch" data-st-input-event="change">
        <option value="">All</option>
        <option data-ng-repeat="row in rowCollection | unique:'AbiSearch' | orderBy: 'AbiSearch'"
                data-ng-selected="row.AbiSearch == AbiSearch_SelectedValue"
                value="{{row.AbiSearch}}">{{row.AbiSearch}}</option>
      </select>

JS：

  if ($localStorage[nameSpace]) {
    var savedState = $localStorage[nameSpace];
    var tableState = ctrl.tableState();

    for (var propertyName in savedState.search.predicateObject) {
      if (savedState.search.predicateObject.hasOwnProperty(propertyName)) {
        scope[propertyName + "_SelectedValue"] = savedState.search.predicateObject[propertyName] || "";
      }
    }

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

Answer 3

如果在同一页面中有更多具有相同过滤器名称的表，则可以使用更好的解决方案在这种情况下，它将创建许多对象来独立存储每个属性

HTML：

      <select data-st-search="Enabled" data-st-input-event="change">
        <option value="">All</option>
        <option data-ng-repeat="row in rowCollection | unique:'Enabled' | orderBy: 'Enabled'"
                data-ng-selected="row.Enabled.toString() == {{StPersistName}}.Enabled_SelectedValue"
                value="{{row.Enabled}}">{{row.Enabled}}</option>
      </select>

JS：

  //fetch the table state when the directive is loaded
  if ($localStorage[nameSpace]) {
    var savedState = $localStorage[nameSpace];
    var tableState = ctrl.tableState();

    //Verifica che l'oggetto sia inizializzato
    if (!angular.isDefined(scope[nameSpace])) {scope[nameSpace] = {};}

    //Indispensabile per preselezionare il filtro in caso di menu a tendina
    for (var propertyName in savedState.search.predicateObject) { 
      if (savedState.search.predicateObject.hasOwnProperty(propertyName)) {
        scope[nameSpace][propertyName + "_SelectedValue"] = savedState.search.predicateObject[propertyName] || "";
      }
    }

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

Angular Smart表过滤器状态保存下拉列表无法正常还原

3 个答案: