Question

让我解释一下我的情景。我在我的母版页中有下拉列表。如果更改了下拉列表，则数据会根据下拉列表值进行更改如果我刷新了我的页面或移动到另一个页面，下拉列表将自动清除。

我希望在刷新页面或移动到其他页面后保留下拉列表值。

我试过这样但是这没有用。

HTML

<select id="Facility_ID" required typeof="text" name="Facility Name" ng-options="Role.FacilityName for Role in Roles"
                    form="DistanceMatrixFormId" class="form-control" ng-model="Role._id" ng-selected="getFacilityID(Role._id.FacilityName)">
            </select>

Controller.js

 $scope.getFacilityID = function (data) {
     localStorage.setItem("FacilityName", data);
     var getfacility = localStorage.getItem("FacilityName");
 }

i refered this link but it is not help ful

我不知道如何保留价值。任何人都可以修理我。

Answer 1

您无法将对象放入本地存储，您必须将字符串存储在本地存储中。

如果您愿意，可以在此处执行我的实施：How to add local storage in angular?

对于您当前的代码，您不需要使用ng-selected。 ng-model就足够了。

<select id="Facility_ID" required typeof="text" 
        name="Facility Name" 
        ng-options="Role.FacilityName for Role in Roles"
        form="DistanceMatrixFormId" 
        class="form-control" 
        ng-model="Role._id"
        ng-change="updateLocalStorage()">
</select>

在角度控制器中，你可以做的是：

myApp.controller('controllerName', ['$scope', 'LocalStorageService',
     function($scope, LocalStorageService){

     // After initialization of your "Role" object

     $scope.Role._id = LocalStorageService.retrieve('mySelectValue');

     $scope.updateLocalStorage = function(){
         LocalStorageService.store('mySelectValue', $scope.Role._id);
     }

}])

Answer 2

以下是使用服务存储所选值的示例。遗憾的是，嵌入式演示因沙盒而无效，但在作为应用程序使用时仍然有效。

＆＃13;

angular.module(
  "App", []
).factory("MyStorage", function() {
  const key = "selected";
  return {
    getValue: function() {
      const stored = localStorage.getItem(key);
      return stored ? JSON.parse(stored) : null;
    },
    setValue: function(value) {
      localStorage.setItem(key, JSON.stringify(value));
    }
  };
}).controller("MyCtrl", function($scope, MyStorage) {
  $scope.options = ["A", "B", "C"];
  $scope.selected = MyStorage.getValue();
  $scope.$watch("selected", newValue => {
    MyStorage.setValue(newValue);
  });
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="App" ng-controller="MyCtrl">
  <select ng-model="selected" ng-options="x for x in options">
  </select>
</div>

＆＃13;

页面刷新后保留下拉值或移动到angularjs中的另一页

2 个答案: