Question

我选择了3个选项。目前，当用户选择其中一个选项然后刷新页面时，他的选择消失。我需要用户能够刷新页面并仍然看到他在页面刷新之前选择的选项。是否有AngularJS指令执行此操作？如果没有，我怎样才能让用户选择在刷新后消失？堆栈溢出没有解决此特定问题的问题。

以下是带有select标记的html：

NameError: global name 're' is not defined

这是app.js文件中的角度控制器：

<!DOCTYPE html>
<html ng-app="findTheBug">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="./app.js" charset="utf-8"></script>
  </head>
  <body ng-controller="bugCTRL">

<p>5+5={{4+6}} (this is a check to make sure angular is working)</p>
<p>Choices: {{greetings}} (this is a check to make sure greetings is connected)</p>

<hr>
<select class="" name="">
  <option value="one">Stack Overflow, You're the Best!</option>
  <option value="two" ng-repeat="greeting in greetings">{{greeting}}</option>
</select>
<hr>
</body>
</html>

我无法找到解决此问题的角度指令，但这里是一个选项下拉列表的示例，它不会在页面刷新时隐藏用户选项。下面发布的一种工作示例，仅供参考......

angular
  .module("findTheBug", [])
  .controller("bugCTRL", bugCTRL);

  function bugCTRL($scope){
  $scope.greetings = ["good morning", "good evening", "good night"];
}

我已经google了，并尝试在我的代码中添加ng-change，ng-selected和ng-disabled以尝试复制上面的代码片段，但是没有成功。我不相信这3条指令中的一条与我所遇到的刷新问题有关，但我可能错了。

（根据堆栈溢出，我花了相当多的时间问这个问题的正确方法。）

Answer 1

您可以使用HTML5 localStroage存储以前选择的数据。

<强> DEMO

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.greetings = ["good morning", "good evening", "good night"];
    var selectedVal = localStorage.getItem('greeting');
    if(selectedVal) {
      $scope.greet = selectedVal;  
    }
    $scope.selectedOption = function(greet) {
      localStorage.setItem('greeting', greet);
    };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select name="selectData" ng-model="greet" ng-change="selectedOption(greet)">
  <option ng-selected="true" value="">Stack Overflow, You're the Best!</option>
  <option ng-repeat="greeting in greetings">{{greeting}}</option>
</select>
</div>

＆＃13;

如何在页面刷新或重新加载后在屏幕上显示用户选择选项？

1 个答案: