Javascript 角度智能表格过滤器状态保存下拉列表不'；不能正常恢复

我已经按照文档中关于保持过滤器状态的说明进行了操作。（）

重新加载页面时，表状态（包括筛选器）将恢复，但是

框显示为空，即使筛选器不起作用

文本过滤器工作正常

角度1.4.7 智能表2.1.5

这是普朗克

---

我将在Select语句中添加NGSELECT属性：

<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>

如果您想可视化数据是如何持久化的（以及我是如何提出“savedState.search.predicateObject.category”的），请在上面添加以下JS：

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

我就是这样解决的： 对于search.predicateObject的每个属性，它会在添加了“_SelectedValue”的作用域中创建一个属性，以便每个控件都可以在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>

---

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

HTML:

---

干得好，谢谢。我以前没有使用过ngSelected属性，因为我通常在select上使用ngOptions。这个解决方案需要我在指令中标识我想要的变量，我在很多地方使用了指令，使用了不同的过滤器，所以我将整个表状态暴露给了范围。我也可以将其用于分页等。为了获得更大的灵活性，您可以保存整个谓词数组（scope.filter=savedState.search.predicateObject），然后在ngSelected中使用filter.category（或filter.[where]）。

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

      <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>

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

      <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>

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