ページをリフレッシュまたはリロードした後に、ユーザーが選択したオプションを画面に表示する方法を教えてください。

私は3つのオプションでドロップダウンを選択しました。現在、ユーザーがオプションの1つを選択してページをリフレッシュすると、その選択は消えます。私は、ページをリフレッシュできるようにするためにはユーザーが必要ですが、ページをリフレッシュする前に彼が選択したオプションが表示されます。これを行うAngularJS指令がありますか？そうでない場合は、更新後にユーザー選択が消えないようにするにはどうすればよいですか？この特定の問題に対処するスタックオーバーフローに関する質問はありません。ここでページをリフレッシュまたはリロードした後に、ユーザーが選択したオプションを画面に表示する方法を教えてください。

selectタグでhtmlです：私はその角度の指令を見つけることができませんでした

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

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

：ここ

<!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ファイルの角度コントローラですこの問題に対処していますが、ここではページの更新時にユーザーオプションを非表示にしない選択ドロップダウンの例を示します。のみ参照目的のために以下に掲載の並べ替えの作業例、...

<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-無効を追加しようとしています上記のコードスニペットは成功していません。私はこれらの3つの指令のうちの1つが私が持っている最新の問題に関連しているとは思っていませんが、間違っている可能性があります。

（私は、スタックオーバーフローに応じて正しい方法この質問をかなりの時間を費やした。）

出典

2017-05-01 Ara Yaghsizian

COOKIES !!!!!!!!!だから、ユーザーの選択を保存するためのクッキーを作成します。次に、 ''でクッキーを呼び出します。シンプル！ – Sank6

上記のようなクッキーやローカルストレージを使用することができますが、私の意見では、これらの値はすべてのリクエストでサーバーに送信されないため、より良い解決策です。これはすべての主要なブラウザでサポートされています。ドキュメントと例は次のURLにあります：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

ページをリフレッシュまたはリロードした後に、ユーザーが選択したオプションを画面に表示する方法を教えてください。

答えて

関連する問題