保持视图状态

Question

我有一个应用程序，它根据带有选择选项的简单表单从数据库中过滤掉对象，每次更改表单时，我都会从服务器获得一个包含过滤对象的列表。

当列表返回时，我用对象列表更新另一个视图，因此用户可以点击列表导航按钮并查看到目前为止过滤的内容。

当用户返回“过滤器导航”选项时，表单已丢失其所在状态，或已丢失所选选项并再次为空白。我从不这样提交表单。

如何保持表单保持原样？

这是我的表格：

       <form id="filter_form" onchange="angular.element(this).scope().fileNameChanged(this)">
            <div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name'">
                <div class="item item-divider">
                    {{ key }}
                </div>
                <label class="item item-input item-select" ng-repeat="(item_key, item) in value | groupBy:'subcategory.name'">
                    <div class="input-label">
                        {{ item_key }}
                    </div>
                    <select>
                        <option selected></option>
                        <option ng-repeat="option in item">
                            {{ option.description }}
                        </option>
                    </select>
              </label>      
            </div>
        </form>

表格如下：

更新

<ion-view>
  <ion-content class="padding">
    <div class="list">
        <form id="filter_form" onchange="angular.element(this).scope().fileNameChanged(this)" novalidate class="simple-form">
            <div ng-repeat="(key, value) in tags.tags.objects | groupBy:'category.name'">
                <div class="item item-divider">
                    {{ key }}
                </div>
                <label class="item item-input item-select" ng-repeat="(item_key, item) in value | groupBy:'subcategory.name'">
                    <div class="input-label">
                        {{ item_key }}
                    </div>
                    <select ng-model="tag" ng-options="option.description for option in item">
              </label>      
            </div>
        </form>
        <a class="button button-block button-positive" href="/#/tab/filter/advanced">Advanced</a>

    </div>
  </ion-content>
</ion-view>

Answer 1

只需将标签放入一个值中：

yourModule.value('tag', {data: null});

在控制器中：

yourModule.controller('formCtrl', function($scope, tag) {
    $scope.tag = {data: null};
    if(tag)
        $scope.tag = tag;
    else
        formData = tag;
    // rest of your code
});

在 html 中，将 select 的 ng-model 更改为 tag.data：

<select ng-model="tag.data" ng-options="option.description for option in item">

看到这个（简体）plunk