角度Jsの表示チェックボックスのチェックページのロード

Question

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

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に保存する必要があります。その後、ページをリロードすると、保存されたデータが読み込まれ、チェックボックスがリセットされます。

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

注：

Answer 2

変更ng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.selected]"からng-model="ctrl.primaryProgramStudiesSelected[primaryPrograms.id]"。

次に、あなたのprimaryProgramStudiesSelected、アレイ内のすべてのオブジェクトにselectedプロパティを追加します。デフォルトで選択する場合は、selectedプロパティをtrueにします。これは予期しない動作につながる可能性として

Answer 3

は、あなたがこのような何かを試すことができますが、mysqlのに使用している場合は、あなたの真/偽のフィールドは、おそらく小さなint型であり、あなたは=「1」NG-真の値を使用する必要がありますng- false-value = "0"。

はまた、コントローラにすでにあなたのデータを取得し、フィールドが選択された場合にどのようにあなたが知っている方法がわからない本当の、イムに選択されたセットする必要があることに注意してください。しかし、この例はうまくいくはずです。