Angular Js Show the Checkbox's Checked when Page Loads

Question

Angular Js Show the Checkbox's Checked when Page Loads.

I am saving the Checkboxes. when I Reload the Page I want to show the selected checkboxes

<md-checkbox ng-repeat="primaryPrograms in ctrl.primaryProgramStudies" ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.id]" ng-checked="primaryPrograms.selected==true">
     {{primaryPrograms.name}}
</md-checkbox>

Script : ctrl.primaryProgramStudiesSelected =

[{"id":1,"name":"SAT","selected":false},{"id":2,"name":"ACT","selected":true},{"id":3,"name":"PSAT","selected":false},{"id":4,"name":"ISEE\/SSAT","selected":false},{"id":5,"name":"AP","selected":true},{"id":6,"name":"General GPA Management","selected":true},{"id":7,"name":"Reading","selected":false},{"id":8,"name":"Math","selected":false},{"id":9,"name":"Science","selected":false},{"id":10,"name":"Social Studies","selected":false},{"id":11,"name":"ESL","selected":true},{"id":12,"name":"College Admissions","selected":true},{"id":13,"name":"TOEFL ","selected":false}]]`

Answer 1

Change ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.id]" to ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.selected]" .

Then add selected property to every object in your primaryProgramStudiesSelected array. If you want it to be selected by default, make the selected property true.

Answer 2

ngChecked directive should not be used together with ngModel , as this can lead to unexpected behavior. https://docs.angularjs.org/api/ng/directive/ngChecked

 angular.module('MyApp',['ngMaterial', 'ngMessages']) .controller('AppCtrl', function($scope) { $scope.items = [{"id":1,"name":"SAT","selected":false},{"id":2,"name":"ACT","selected":true},{"id":3,"name":"PSAT","selected":false},{"id":4,"name":"ISEE\\/SSAT","selected":false},{"id":5,"name":"AP","selected":true},{"id":6,"name":"General GPA Management","selected":true},{"id":7,"name":"Reading","selected":false},{"id":8,"name":"Math","selected":false},{"id":9,"name":"Science","selected":false},{"id":10,"name":"Social Studies","selected":false},{"id":11,"name":"ESL","selected":true},{"id":12,"name":"College Admissions","selected":true},{"id":13,"name":"TOEFL ","selected":false}]; }); 

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-sanitize.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> <div ng-app="MyApp"> <div ng-controller="AppCtrl" class="md-padding demo checkboxdemoSelectAll"> <div layout="row" layout-wrap=""> <div flex="100" layout="column"> <div> <fieldset class="demo-fieldset"> <legend class="demo-legend">Select </legend> <div layout="row" layout-wrap="" flex=""> <div class="demo-select-all-checkboxes" flex="100"> <md-checkbox ng-repeat="item in items" ng-model="item.selected"> {{ item }} </md-checkbox> </div> </div> </fieldset> </div> </div> </div></div> </div> 

While reload the app, Everything reload & the code is render freshly. And whatever changes made in client side(without server side), everything gone. So as per @Pengyy comment you have to store the selected items to server / cookies / localstorage . Then when reload pages just read the stored data and reset check boxes.

Answer 3

Can you try something like this:

<div ng-repeat="primaryPrograms in ctrl.primaryProgramStudies">
<div class="checkbox">
    <label>
        <input ng-model="primaryPrograms.selected" ng-true-value="true" ng-false-value="false" type="checkbox" ng-checked="primaryPrograms.selected === true"> Checked
    </label>
</div>
</div>

Note: if you are using mysql your true/false fields are probably tiny int, and you should use ng-true-value="1" ng-false-value="0".

Also note that in controller you already should set selected to true, im not sure how you get your data and how you know if field is selected. But this example should work.