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

ngCheckedngModel과 함께 사용하지 마십시오. 예기치 않은 동작이 발생할 수 있습니다.

응용 프로그램을 다시로드하는 동안

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>

https://docs.angularjs.org/api/ng/directive/ngChecked

, 모든 코드가 갓 렌더링 &를 다시로드합니다. 그리고 클라이언트 측 (서버 측없이)에서 변경된 모든 사항은 모두 사라졌습니다. @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".

컨트롤러에서 이미 선택 항목을 true로 설정해야합니다. 데이터를 얻는 방법과 필드가 선택되어 있는지 알 수없는 방법입니다. 그러나이 예제는 효과가있다.