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

Question

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

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

文本过滤器工作正常。

Angular 1.4.7 智能-table 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

Answer 2

我是这样解决的：对于 search.predicateObject 的每个属性，它在添加了“_SelectedValue”的范围内动态创建一个属性，因此每个控件都可以在 html.[=12= 中绑定它]

      <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 智能 table 过滤器状态保存下拉列表无法正确恢复

Angular Smart table filter state save dropdown doesn't restore properly

javascript

angularjs

smart-table