jeudi 2 février 2017

AngularJS Checkbox retain check value when the page reloads

I have a search screen with a checkbox, and want to retain the checkbox selection when the user navigates away and comes back to the screen. Using the session storage, i am able to retain the value in the model, but the checkbox checked does not display correct based on the model value. When I search online, it looks like i cannot use ng-model and ng-checked together. But I don't want to use jquery either. Is it possible to do this with just Angular? Thanks in Advance.

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

vm.searchInput = { active = true};

vm.init = function () {
if ($window.sessionStorage.getItem("Search_Active")) {
    vm.searchInput.active = $window.sessionStorage.getItem('Search_Active');   }
}

vm.Search = function () {
    $window.sessionStorage.setItem('Search_Active', vm.searchInput.active);
}




Aucun commentaire:

Enregistrer un commentaire