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

Question

I have made a select drop down with 3 options. 我选择了3个选项。 Currently, when the user picks one of the options then refreshes the page, his selection disappears. 当前，当用户选择一个选项然后刷新页面时，他的选择消失。 I need the user to be able to refresh the page and still see the option he chose before the page refresh. 我需要用户能够刷新页面并在页面刷新之前仍然看到他选择的选项。 Is there an AngularJS directive that does this? 是否有执行此操作的AngularJS指令？ If not, how can I keep the users selection from disappearing after a refresh? 如果没有，如何在刷新后不让用户选择消失？ There are no questions on stack overflow that address this specific issue. 堆栈溢出没有任何问题可以解决此特定问题。

Here is the html with the select tag: 这是带有select标签的html：

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

Here is the angular controller in the app.js file: 这是app.js文件中的角度控制器：

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

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

I have not been able to find an angular directive that addresses this issue, but here is an example of a select drop-down that doesn't hide the users option on a page refresh. 我还没有找到解决此问题的角度指令，但这是一个select下拉列表的示例，该下拉列表没有在页面刷新时隐藏用户选项。 A working example of a sort, posted below for reference purposes only... 下面是发布的一种工作示例，仅供参考...

<select  class="form-control from-to-controls" ng-model="pair.from._id"  ng-change="selectEndpoint(pair.from,'{{pair.from._id}}')" ng-disabled="autoTest && testRunning || disableAll">
    <option value="NEW">New</option>
    <option ng-repeat="endpoint in endpoints" value="{{endpoint._id}}" ng-selected="endpoint.name==pair.from.name">{{endpoint.name}}</option>
</select>


<select class="form-control from-to-controls" ng-model="pair.to._id"   ng-change="selectEndpoint(pair.to,'{{pair.to._id}}')" ng-disabled="autoTest && testRunning || disableAll">
    <option value="NEW">New</option>
    <option ng-repeat="endpoint in endpoints" value="{{endpoint._id}}" ng-selected="endpoint.name==pair.to.name">{{endpoint.name}}</option>
</select>

I have googled, and tried adding ng-change, ng-selected, and ng-disabled to my code to attempt to replicate this code snippet above, but have not been successful. 我已经用Google搜索过，并尝试将ng-change，ng-selected和ng-disabled添加到我的代码中，以尝试复制上面的代码片段，但未成功。 I don't believe one of these 3 directives is related to the refresh issue I'm having, but I could be wrong. 我不认为这3个指令之一与我遇到的刷新问题有关，但是我可能错了。

(I spent a considerable amount of time asking this question the correct way according to stack overflow.) （根据堆栈溢出，我花了大量时间问这个问题正确的方法。）

Answer 1

You can use HTML5 localStroage to store the previously selected data. 您可以使用HTML5 localStroage存储先前选择的数据。

DEMO DEMO

 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); }; });

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

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

问题描述

1 个解决方案

解决方案1
0 2017-05-01 17:00:53

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

问题描述

1 个解决方案

解决方案1 0 2017-05-01 17:00:53

解决方案1
0 2017-05-01 17:00:53