Angularjs在页面加载时显示复选框被选中答案

【问题标题】：Angular Js Show the Checkbox's Checked when Page LoadsAngularjs在页面加载时显示复选框被选中
【发布时间】：2017-05-16 20:20:41
【问题描述】：

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}]]`

【问题讨论】：

您必须将所选项目存储到服务器或cookies。然后当重新加载页面时，只需读取存储的数据并重置复选框。
查看我的更新答案..

标签： javascript angularjs checkbox checked

【解决方案1】：

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。然后在重新加载页面时只需读取存储的数据并重置复选框。

【讨论】：

是的，我将结果保存在服务器端，并且得到对浏览器的响应仍然没有选中复选框。

【解决方案2】：

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

然后将selected 属性添加到primaryProgramStudiesSelected 数组中的每个对象。如果您希望它默认被选中，请将 selected 属性设为 true。

【讨论】：

我已经添加了 selected 标志 true 仍然没有选中复选框。？我必须为此添加另一个属性吗？

【解决方案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 字段可能是很小的 int，您应该使用 ng-true-value="1" ng-false-value="0"。

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

【讨论】：