如何在頁面刷新或重新加載後讓用戶選擇的選項在屏幕上顯示？

我做了一個選擇下拉選擇3個選項。目前，當用戶選擇其中一個選項然後刷新頁面時，他的選擇消失。我需要用戶能夠刷新頁面，並在頁面刷新之前仍然看到他選擇的選項。有沒有這樣做的AngularJS指令？如果不是，我怎樣才能讓用戶選擇在刷新後消失？堆棧溢出沒有解決這個特定問題的問題。如何在頁面刷新或重新加載後讓用戶選擇的選項在屏幕上顯示？

這裏是選擇標記的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>

這裏是在app.js文件中的角控制器：

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

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

我一直沒能找到一個角指令，解決了這個問題，但這裏是一個選擇下拉列表的示例，它不會隱藏頁面刷新中的用戶選項。一類的工作示例，貼在下面僅供參考......

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

我用Google搜索，並試圖加入NG-變化，NG-選擇，NG-禁用我的代碼試圖複製這一上面的代碼片段，但沒有成功。我不相信這三條指令中的一條與我遇到的刷新問題有關，但我可能是錯的。

（我花了相當大的時間量的根據提出這個問題的正確方式堆棧溢出。）

來源

2017-05-01 Ara Yaghsizian

COOKIES !!!!!!!!!所以，製作一個cookie來存儲用戶選擇。然後在'>'上調用cookie。簡單！ – Sank6

您可以使用上述的cookie或本地存儲，這在我看來是更好的解決方案，因爲這些值不會在每次請求時發送到服務器。這在每個主要瀏覽器都受支持。文檔和示例可以在這裏找到：https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API – Riiverside

爲什麼你需要重新加載網頁？ Angular是SPA，所以不需要重新加載。但是，如果您必須，我建議您使用Localstorage。 –

您可以使用HTML5 localStroage存放先前選定的數據。

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>

來源

2017-05-01 17:00:53

如何在頁面刷新或重新加載後讓用戶選擇的選項在屏幕上顯示？

回答

相關問題