AngularJS Checkbox Wert beibehalten, wenn die Seite neu geladen wird

Question

Ich habe einen Suchbildschirm mit einem Kontrollkästchen und möchte die Kontrollkästchenauswahl beibehalten, wenn der Benutzer weg navigiert und zum Bildschirm zurückkehrt. Mithilfe des Sitzungsspeichers kann ich den Wert im Modell beibehalten, aber das angekreuzte Kontrollkästchen wird basierend auf dem Modellwert nicht korrekt angezeigt. Wenn ich online suche, sieht es so aus, als ob ich ng-model und ng-checked nicht zusammen verwenden kann. Aber ich möchte auch nicht jQuery benutzen. Ist es möglich, dies nur mit Angular zu tun? Danke im Voraus.

<div class="container" ng-controller="SearchController as vm" data-ng-init="vm.init()"> 
<form ng-submit="vm.Search()"> 
<input type="checkbox" id="chkActive" name="chkActive" value="Active" ng-model="vm.searchInput.active" ng-checked="vm.searchInput.active" /> <span>Show Active Records</span> 
<button id="searchBtn" type="submit"> 
</form> 
</div> 

Angular-Controller-Code:

Answer 1

ich es nicht überprüft haben, aber ich bin sicher, dass die erste Zeile sollte lauten:

vm.searchInput = { active: true}; 

Answer 2

dort Wenn der Modellwert ist, du willst dich daran binden, und du weißt, dass es gut ist, warum brauchst du dann beide checked und model? Das Binden des Werts an die Eingabe ist ausreichend. Wie Sie unten sehen können, ist die Verwendung beider problematisch.

angular.module('app', []); 
 
angular.module('app').controller('c', c); 
 

 
function c() { 
 
    var self = this; 
 
    self.checked = true; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app "app" ng-controller="c as ctrl"> 
 
    <div> 
 
    <label>Checked</label> 
 
    <input type="checkbox" ng-model="ctrl.checked" /> 
 
    <div> 
 
     <span>Checked: {{ctrl.checked}}</span> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <label>Checked Trouble</label> 
 
    <input type="checkbox" ng-model="ctrl.checked" ng-checked="!ctrl.checked" /> 
 
    <div> 
 
     <span>Checked: {{ctrl.checked}}, !Checked: {{!ctrl.checked}}</span> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <label>Checked Double Trouble</label> 
 
    <input type="checkbox" ng-checked="!ctrl.checked" ng-model="ctrl.checked" /> 
 
    <div> 
 
     <span>Checked: {{ctrl.checked}}, !Checked: {{!ctrl.checked}}</span> 
 
    </div> 
 
    </div> 
 
</div>