从选项中选择后如何保留选定的值?

时间:2015-07-16 12:33:27

标签: javascript angularjs select angular-ngmodel ng-options

我是AngularJS编程的新手,只用了几个星期,我想了解为什么,在我使用的选择框中,当重新加载页面或在页面之间切换并返回到此页面时,选择的选项不会作为要显示的主要选项,选项<option value="" selected>No assignat</option>是始终保留在那里的选项吗?

<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从工厂接收名称列表,并且用户选择的名称存储在localstorage中,并且必须在Select框中保持选中状态,我希望你能帮助我:)

打扰一下,如果我的英语不够好,感谢你未来的答案,我希望通过在stackoverflow和所有地方搜索和研究,我找到了我没有的东西..

-EDITED

我想补充一点,当我运行它以查看它是如何工作的时,那就是Chrome控制台中显示的内容:

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

我的意思是,自动分配的值是object:xx,我想最好是每个名字的id,在工厂里是1,2,3,4,5。 ..分别与nameXX号码相同的ID ..如果这也可以解决,那就好了:))

2 个答案:

答案 0 :(得分:1)

由于您使用ng-model='selected',您必须初始化$scope.selected,如:

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

答案 1 :(得分:0)

设置$ scope.selected时,只将其设置为&#34; title&#34;,而不是实际选中的对象。

  

localStorage.setItem(&#39; nomPobleConfig&#39;,objPobla.title);

您需要将完整对象设置为localStorage,如下所示:

localStorage.setItem('nomPobleConfig', objPobla);