angularJSのui-viewに戻るときにチェックボックスがオフになっています

Question

私は角度jに3つのビューテンプレートを、それぞれに3つのフォームを持っています。最初のビューには、チェックボックスオプション付きのフォームがあります。 2番目のビューに移動して最初のビューに戻る場合、チェックボックスはチェックされずにリセットされます。

このチェックボックスをオンにしたままにする最良の解決策は何ですか？ 私は、オブジェクトcourseContentを持っていると答えは、私が最初のUIビューテンプレートに次のコードを使用しているcourseContent.optQ_1.answer

にそこに保存されています。ここ

<div> 
<div class="col-md-8"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      Course Content and Organization 
     </div> 
     <div class="panel-body"> 
      <form name="courseContentOrg"> 
       <ol> 
        <div class="col-md-12"> 
         <li><strong>The course objectives were clear</strong></li> 
        </div> 
        <div class="col-md-12"> 
         <ul class="sub-list"> 
          <li><input type="radio" name="optQ_1" ng-model="optQ_1" value="strongly_agree" 
             ng-required="!optQ_1" ng-checked="{{ courseContent.optQ_1.answer == 'strongly_agree' ? 'checked' : ''}}"> Strongly Agree 
          </li> 
          <li><input type="radio" name="optQ_1" ng-model="optQ_1" value="uncertain" 
             ng-required="!optQ_1" ng-checked="{{ courseContent.optQ_1.answer == 'uncertain' ? 'checked' : ''}}"> 
           Uncertain 
          </li> 
          <li><input type="radio" name="optQ_1" ng-model="optQ_1" value="disagree" 
             ng-required="!optQ_1" ng-checked="{{ courseContent.optQ_1.answer == 'disagree' ? 'checked' : ''}}"> 
           Disagree 
          </li> 
          <li><input type="radio" name="optQ_1" ng-model="optQ_1" value="strongly_disagree" 
             ng-required="!optQ_1" ng-checked="{{ courseContent.optQ_1.answer == 'strongly_disagree' ? 'checked' : ''}}"> Strongly Disagree 
          </li> 
         </ul> 
        </div> 

        <div class="col-md-12"> 
         <li><strong>The Course workload was manageable</strong></li> 
        </div> 
        <div class="col-md-12"> 
         <ul class="sub-list"> 
          <li><input type="radio" name="optQ_2" ng-required="!optQ_2" ng-model="optQ_2" value="strongly_agree"> Strongly Agree</li> 
          <li><input type="radio" name="optQ_2" ng-required="!optQ_2" ng-model="optQ_2" value="agree"> Agree</li> 
          <li><input type="radio" name="optQ_2" ng-required="!optQ_2" ng-model="optQ_2" value="uncertain"> Uncertain</li> 
          <li><input type="radio" name="optQ_2" ng-required="!optQ_2" ng-model="optQ_2" value="disagree"> Disagree</li> 
          <li><input type="radio" name="optQ_2" ng-required="!optQ_2" ng-model="optQ_2" value="strongly_disagree"> Strongly Disagree</li> 
         </ul> 
        </div> 

        <div class="col-md-12"> 
         <li><strong>The Course was well organized (e.g. timely access to materials, notification of 
          changes, etc.)</strong></li> 
        </div> 
        <div class="col-md-12"> 
         <ul class="sub-list"> 
          <li><input type="radio" name="optQ_3" ng-required="!optQ_3" ng-model="optQ_3" value="strongly_agree"> Strongly Agree</li> 
          <li><input type="radio" name="optQ_3" ng-required="!optQ_3" ng-model="optQ_3" value="agree"> Agree</li> 
          <li><input type="radio" name="optQ_3" ng-required="!optQ_3" ng-model="optQ_3" value="uncertain"> Uncertain</li> 
          <li><input type="radio" name="optQ_3" ng-required="!optQ_3" ng-model="optQ_3" value="disagree"> Disagree</li> 
          <li><input type="radio" name="optQ_3" ng-required="!optQ_3" ng-model="optQ_3" value="strongly_disagree"> Strongly Disagree</li> 
         </ul> 
        </div> 

        <div class="col-md-12"> 
         <li><strong>Comments</strong></li> 
        </div> 
        <div class="col-md-12"> 
         <textarea rows="4" name="commentsQ_1" ng-model="commentsQ_1" placeholder="Write your comments here" 
          class="form-control"></textarea> 
        </div> 

       </ol> 
      </form> 
     </div> 
     <div class="panel-footer"> 
      <a href="#studentsContribution" class="next btn btn-primary" ng-click="submitCourseContent()" 
       ng-disabled="courseContentOrg.$invalid">Next</a> 
     </div> 
    </div> 
</div> 
<div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading">Evaluation for:</div> 
     <div class="panel-body"> 
      <h4 class="borderBottom">Department:</h4> 
      <div>{{ basicInfo.dept }}</div> 

      <h4 class="borderBottom">Semester:</h4> 
      <div>{{ basicInfo.semester }}</div> 

      <h4 class="borderBottom">Subject:</h4> 
      <div>{{ basicInfo.subject }}</div> 

      <h4 class="borderBottom">Teacher:</h4> 
      <div>{{ basicInfo.teacher }}</div> 

     </div> 
    </div> 
</div> 

アプリです。 js

var app = angular.module('myApp', ["ngRoute"]); 
app.controller('basicInfo', function ($scope, basicInfoService) { 
$scope.showViews = false; 
$scope.basicForm = false; 
console.log($scope.basicInfo); 
$scope.departments = [ 
    {name: 'Architecture & Panning'}, 
    {name: 'Chemical Engineering'}, 
    {name: 'Computer Systems Engineering'}, 
    {name: 'Electronic Engineeering'}, 
    {name: 'Energy & Environment Engineering'}, 
    {name: 'Industrial Engineering & Management'}, 
    {name: 'Petroleum & Gas Engineering'}, 
    {name: 'Metallurgy & Material Engineering'}, 
    {name: 'Telecommunication Engineering'}, 
]; 

$scope.basicInfo = basicInfoService.getBasicInfo(); 

$scope.subjects = [ 
    {code: 'DLD', title: 'Digital Logic Design'}, 
    {code: 'ITC', title: 'Introduction to computer'}, 
    {code: 'SCQ', title: 'Sequential Circuit Design'}, 
]; 

$scope.teachers = [ 
    {name: 'Fahad Iqbal'}, 
    {name: 'Shameem-ur-Rehman'}, 
    {name: 'Dr. Munaf Rashid'} 
]; 
$scope.surveyFor = function() { 
    console.log('hi'); 
}; 

$scope.submitForm = function() { 

    $scope.showViews = true; 
    $scope.basicForm = true; 
    var basicInfo = { 
     'dept': $scope.dept, 
     'semester': $scope.semester, 
     'subject': $scope.sub, 
     'teacher': $scope.teach 
    }; 

    basicInfoService.addBasicInfo(basicInfo); 
} 
}); 

app.controller("courseContentOrg", function ($scope, basicInfoService) { 
$scope.basicInfo = basicInfoService.getBasicInfo(); 
$scope.courseContent = basicInfoService.getQuestionaire().courseContent; 
console.log($scope.courseContent); 
$scope.submitCourseContent = function() { 

    var courseContentOrg = { 
     'optQ_1': { 
      'question': 'The course objectives were clear', 
      'answer': $scope.optQ_1 
     }, 
     'optQ_2': { 
      'question': 'The Course workload was manageable', 
      'answer': $scope.optQ_2 
     }, 
     'optQ_3': { 
      'question': 'The Course was well organized (e.g. timely access to materials, notification of changes, etc.)', 
      'answer': $scope.optQ_3 
     }, 
     'commentsQ_1': { 
      'question': 'Comments', 
      'answer': $scope.commentsQ_1 
     } 
    }; 

    basicInfoService.addCourseContentChoices(courseContentOrg); 
} 
}); 

app.controller("studentsContributions", function ($scope, basicInfoService)  { 
$scope.basicInfo = basicInfoService.getBasicInfo(); 
}); 

app.service('basicInfoService', function() { 
var basicInfo; 
var questionaire = { 
    'courseContent': 0, 
    'studentsContributions': 0 
}; 

var addBasicInfo = function (newObj) { 
    basicInfo = {}; 
    basicInfo = newObj; 
}; 

var addCourseContentChoices = function (newObj) { 
    questionaire.courseContent = {}; 
    questionaire.courseContent = newObj; 
}; 

var getQuestionaire = function() { 
    return questionaire; 
}; 

var getBasicInfo = function() { 
    return basicInfo; 
}; 

return { 
    addBasicInfo: addBasicInfo, 
    getBasicInfo: getBasicInfo, 
    addCourseContentChoices: addCourseContentChoices, 
    getQuestionaire: getQuestionaire 
} 
}); 

app.config(function ($routeProvider) { 
$routeProvider 
    .when("/courseContentOrg", { 
     templateUrl: "views/questions/courseContentOrg.html", 
     controller: 'courseContentOrg' 
    }) 
    .when("/", { 
     templateUrl: "views/basicInfo.html", 
     controller: 'basicInfo' 
    }) 
    .when("/studentsContribution", { 
     templateUrl: "views/questions/studentsContributions.html", 
     controller: 'studentsContributions' 
    }) 
    .otherwise("/", { 
     templateUrl: "views/basicInfo.html", 
     controller: 'basicInfo' 
    }) 
}); 

app.factory("basicData", function() { 
return {}; 
}); 

添付資料を参照してください。 inspect要素では動作していますが、チェックボックスはチェックされていませんか？別の状態への移行前

first ui-view template snapshot

Answer 1

、あなたはどこかにこれらのチェックボックスの値を格納する必要があります。 basicInfoServiceにはすでにすべてのものがあるので、それらの値を保存するのに適しています。また、他のストレージオプションを使用することもできます。

だから、あなたのcourseContentOrgコントローラでは、この（ここで私はあなたのbasicInfoServiceとバージョンを使用してんだけど、この1つは好ましいが、あなたは、あなたが好きなストレージオプションを使用することができます）のようなものが必要になります：

を

var storedQuestionare = basicInfoService.getQuestionare(); 
$scope.optQ_1 = storedQuestionare .optQ_1 || default_value; //you need to put the default value here if you didn't store your values yet (for example, first time activating this state). 
//rest of the values that you need ($scope.optQ_2, $scope.optQ_3, ...)