AngularJSチェックボックスは、ページがリロードされたときにチェック値を保持します

Question

私はチェックボックス付きの検索画面を持っており、ユーザーがナビゲートして画面に戻ったときにチェックボックスの選択を保持します。 セッションストレージを使用すると、モデルの値を保持することができますが、チェックボックスがモデル値に基づいて正しく表示されません。 オンラインで検索すると、ng-modelとng-checkedを一緒に使用できないようです。しかし、私はjqueryを使いたくない。 Angularでこれを行うことは可能ですか？前もって感謝します。

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