CODEWITHSUNDEEP
htmlangularjsangularjs-scope
Harry
Harry

Reputation: 13329

Keeping a views state

I have an app that filters out objects from a DB based on a simple form with select options, with each change in the form I get a list from the server with the filtered objects.

When the list returns, I update another view with the list of objects, so the user can tap on the List nav button and see what is filtered so far.

When the user goes back to the Filter nav option, the form has lost the state is was in, or lost the options selected and is blank again. I never submit the form as such.

How do you keep the form to stay the way it was left?

This is my form:

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

Form looks like this:

enter image description here

UPDATE

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

Upvotes: 1

Views: 79

Answers (1)

s-hoff
s-hoff

Reputation: 196

Just put tag into a value:

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

in the controller:

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

in the html, change the select´s ng-model to tag.data:

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

see this (simplified) plunk

Upvotes: 1

Related Questions