Question

我有一个应用程序，它根据带有select选项的简单表单过滤掉DB中的对象，每个表单中的更改我从服务器获取带有过滤对象的列表。

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

当用户返回“过滤器”导航选项时，表单已丢失状态，或者丢失了所选的选项并再次显示为空白。我从不提交表格。

你如何保持表格保持原样？

这是我的表格：

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

表格如下：

enter image description here

更新

<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

保持观点状态

1 个答案: