AngularJS Checkbox сохраняет значение проверки при перезагрузке страницы

Question

У меня есть окно поиска с флажком, и вы хотите сохранить этот флажок, когда пользователь переместится и вернется к экрану. Используя хранилище сеансов, я могу сохранить значение в модели, но флажок установлен неправильно, в зависимости от значения модели. Когда я ищу в Интернете, похоже, что я не могу использовать ng-model и ng-checked вместе. Но я не хочу использовать jquery. Можно ли это сделать только с угловым? Заранее спасибо.

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

Угловая контроллер Код:

Answer 1

Я не проверял, но я уверен, что первая строка должна гласить:

vm.searchInput = { active: true}; 

Answer 2

Если значение модели есть, вы хотите привязываться к нему, и вы знаете, что это хорошо, тогда зачем вам нужны и checked, и model? Достаточно привязать значение к входу. Как вы можете видеть ниже, использование обоих проблем проблематично.

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>