CODEWITHSUNDEEP
javascriptangularjsselectangular-ngmodelng-options
edusola93
edusola93

Reputation: 9

How to keep the selected value after selecting from options?

I'm quite new at AngularJS programming, just a few weeks with it and I would like to understand why, in the select box I use, when reloading the page or switching between pages and returning to this one, the option selected does not stay as the main option to be shown, and the option <option value="" selected>No assignat</option> is the one that always stays there?

<select ng-model="selected" ng-options="poblacio.title for poblacio in poblacions" ng-change="canviarPoblacio(selected)">
        <option value="" selected>No assignat</option>
</select>

-CONTROLLER

.controller('ConfigCtrl', function($scope, noms, fPoblacions){
  $scope.poblacions = fPoblacions.getPoblacionsConfig();
  $scope.selected = localStorage.getItem('nomPobleConfig');
  $scope.canviarPoblacio = function(objPobla){
    localStorage.setItem('nomPobleConfig', objPobla.title);
    localStorage.setItem('idPobleConfig', objPobla.id);
    window.location.reload();
  }
})

$scope.poblacions receives a list of names from a factory and the name that the user selects is storaged at the localstorage and would have to remain selected in the Select box, I hope you can help me :)

Excuse me if my english's not good at all, thanks for your future answers and I hope I find in them what I have not by searching and researching here in stackoverflow and everywhere..

-EDITED

I would like to add that, when I run it to see how it works, that's what appears in the Chrome console:

<select class="selectBox ng-pristine ng-untouched ng-valid" ng-model="selected" ng-options="poblacio.title for poblacio in poblacions" ng-change="canviarPoblacio(selected)">
    <option value="" selected="selected">No assignat</option>
    <option value="object:9" label="name1">name1</option>
    <option value="object:10" label="name2">name2</option>
    <option value="object:11" label="name3">name3</option>
    <option value="object:12" label="name4">name4</option>
    <option value="object:13" label="name5">name5</option>
    <option value="object:14" label="name6">name6</option>
    <option value="object:15" label="name7">name7</option>
    <option value="object:16" label="name8">name8</option>
    <option value="object:17" label="name9">name9</option>
    <option value="object:18" label="name10">name10</option>
    <option value="object:19" label="name11">name11</option>
    <option value="object:20" label="name11">name11</option>
    <option value="object:21" label="name12">nam12</option>
    <option value="object:22" label="name13">name13</option>
    <option value="object:23" label="name14">name14</option>
    <option value="object:24" label="name15">name15</option>
</select>

I mean, the values assigned automatically are object:xx, and I suppose that it would be better to be the id's of every name, which in the factory are 1,2,3,4,5... respectively, same ID as the nameXX number.. if this can be solved too, it would be good :)

Upvotes: 0

Views: 2217

Answers (2)

michaelb
michaelb

Reputation: 175

When you set $scope.selected, you are only setting it to the "title", not the actual selected object.

localStorage.setItem('nomPobleConfig', objPobla.title);

You'll need to set the full object into localStorage like this:

localStorage.setItem('nomPobleConfig', objPobla);

Upvotes: 0

Dalorzo
Dalorzo

Reputation: 20014

Since you are using ng-model='selected' You have to initialize $scope.selected like:

$scope.selected = localStorage.getItem('nomPobleConfig');

Upvotes: 1

Related Questions