Angular Js 在页面加载时显示复选框的选中状态

Question

Angular Js 在页面加载时显示复选框的选中状态。

我正在保存复选框。当我重新加载页面时，我想显示选中的复选框

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

脚本： 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

将 ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.id]" 更改为 ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.selected]"。

然后将 selected 属性添加到 primaryProgramStudiesSelected 数组中的每个对象。如果你想让它被默认选中，让选中的属性为真。

Answer 2

ngChecked 指令不应与 ngModel 一起使用，因为这会导致意外行为。 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>

重新加载应用程序时，所有内容都会重新加载，并且代码会重新呈现。无论在客户端（没有服务器端）做了什么改变，一切都消失了。因此，根据 @Pengyy 评论，您必须将所选项目存储到 server / cookies / localstorage。然后当重新加载页面时，只需读取存储的数据并重置复选框。

Answer 3

你能试试这样吗:

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

注意：如果您使用 mysql，您的 true/false 字段可能是小整数，您应该使用 ng-true-value="1" ng-false-value="0" .

另请注意，在控制器中您应该已经将 selected 设置为 true，我不确定您如何获取数据以及您如何知道字段是否被选中。但是这个例子应该可以。

Angular Js 在页面加载时显示复选框的选中状态

Angular Js Show the Checkbox's Checked when Page Loads

javascript

angularjs

checkbox

checked