La case à cocher est décochée pendant que je retourne à l'ui-view dans angularJS

Question

J'ai trois modèles de vues en js angulaire et trois formes respectivement. Dans la première vue, il y a un formulaire avec les options de case à cocher. Lorsque je passe en deuxième vue et que je souhaite revenir à la première vue, la case à cocher est réinitialisée à non cochée.

Quelle est la meilleure solution pour que cette case reste cochée? J'ai un courseContent objet et la réponse est sauvé, il en courseContent.optQ_1.answer

J'ai utilisé le code suivant dans le premier modèle ui-view:

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

est l'application ici. 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 {}; 
}); 

Voir dans la pièce jointe. dans l'élément d'inspection, cela fonctionne mais la case à cocher n'est pas cochée?

first ui-view template snapshot

Answer 1

Avant de transition vers un autre état, vous devez stocker les valeurs de ces cases à cocher quelque part. Puisque vous avez déjà tout en place dans votre basicInfoService, c'est un bon endroit pour stocker ces valeurs. En outre, vous pouvez utiliser d'autres options de stockage.

Ainsi, dans votre contrôleur courseContentOrg, vous aurez besoin d'avoir quelque chose comme ça (ici j'utilise la version avec votre basicInfoService, mais vous pouvez utiliser toute option de stockage que vous voulez, bien que celui-ci est préférable):

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, ...)