2016-07-04 4 views
0

Demo:wie ausgewählte Option von Benutzern zu halten, wenn Ansichten

geändert habe ich eine Dropdown-Liste und Optionen von JSON werden fecthed. sagen

<select ng-model="projectModel" ng-options="project as project.projectName"> 
<option>one</option> 
<option>two</option> 
<option>three</option> 
<option>four</option> 
<option>and so on... </option> 
</select> 

ich habe zwei Ansichten page1.html und

in page1.html page2.html i den folgenden Code haben. Wählen Sie das Feld mit den obigen Optionen aus, wenn der Benutzer eine Option auswählt, sagen Sie, der Benutzer hat drei ausgewählt. Das muss irgendwo gespeichert werden. Ich bin nicht in der Lage zu speichern, also wenn der Benutzer auf page2.html klickt, sollten die zuvor in page1.html ausgewählten Daten nicht zurückgesetzt werden.

HTML:

<body ng-app="staticSelect"> 
    <div ng-controller="ddController"> 
    <form name="myForm"> 
    <label for="singleSelect"> Single select: </label><br> 
    <select name="singleSelect" ng-model="data.singleSelect"> 
     <option ng-repeat="x in options">{{x}}</option> 
    </select><br> 
    <tt>singleSelect = {{data.singleSelect}}</tt> 
    </form> 
</div> 
</body> 

JS

app.controller('ddController', ['$scope', function($scope) { 
    $scope.data = { 
    singleSelect: null, 
    }; 
    $scope.options = ["red","blue","yellow"]; 
}]); 

app.config(function ($routeProvider) { 
    $routeProvider 
     .when('/', { 
     templateUrl: '01.html', 
     controller: 'htmlCtrl', 
     }) 
     .when('/html', { 
     templateUrl: '02.html', 
     controller: 'htmlCtrl', 
     }) 
}) 

jede Hilfe sehr geschätzt werden würde! Danke

+0

Sie hineinblicken kann 'ng-cookies' oder' localStorageModule' dass Winkel bietet . – Sajal

+0

@ Dev-One: Wie mache ich um Änderungsereignis in eckigen –

Antwort

1

Eine Referenz für 'ng-cookies' in der Hauptansicht und einen Service zum Setzen und Abrufen eines Cookies hinzugefügt.

in Html:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-cookies.js"></script> 

Die Bindung html hat die Methode den Cookie setzen durch ng-change

<select name="singleSelect" ng-model="data.singleSelect" ng-change="setSelect()"> 
    <option ng-repeat="x in options">{{x}}</option> 
</select> 

Sie können die CookieService im sehen Working Demo

In Controller:

Wenn die setSelect() Verfahren wird der ausgewählte Wert ausgelöst wird, in Cookie gesetzt, wenn die Ansicht zurück, um es zurückgeführt wird wird wieder Speicher den Wert aus dem Cookie

if(cookieService.getAppData("selected") !== null && cookieService.getAppData("selected") !== undefined){ 
$scope.data.singleSelect = cookieService.getAppData("selected"); 
} 

$scope.setSelect = function(){ 
    cookieService.setAppData("selected", $scope.data.singleSelect); 
} 
+0

nicht sicher, ob Arbeits Demo Link arbeiten, und ich eingecheckte Ressource Tab, ich finde keine gespeicherten Daten :( –

+0

@Yoo sehen Sie das Cookie innerhalb 'Ressourcen/Cookies/run.plnkr.co', mit dem Namen 'Selected' – Sajal

+0

Ändern Sie vorher den Wert von Dropdown auf eine Farbe – Sajal

Verwandte Themen