Checkbox is unchecked while I go back to the ui-view in angularJS

Question

I have three view templates in angular js and three forms in them respectively. In the first view there is a form with checkbox options. When I go to second view and want to return back to the first view the checkbox is reset to unchecked.

What is the best solution for this to remain the checkbox checked? I have an object courseContent and the answer is saved there in courseContent.optQ_1.answer

I have used the following code in first ui-view template:

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

here is app.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 {};
});

See in the attachment. in inspect element it is working but the checkbox is unchecked?

first ui-view template snapshot

add your code sample please

jos
– jos

2017-04-06 09:04:51 +00:00
Commented Apr 6, 2017 at 9:04 — jos
– jos, Commented Apr 6, 2017 at 9:04
@jos code updated

Rameez Raja
– Rameez Raja

2017-04-06 09:13:35 +00:00
Commented Apr 6, 2017 at 9:13 — Rameez Raja
– Rameez Raja, Commented Apr 6, 2017 at 9:13

Emin Laletovic · Accepted Answer · 2017-04-06 10:09:13Z

1

Before you transition to another state, you would need to store the values of those check boxes somewhere. Since you already have everything in place in your basicInfoService, that is a good place to store those values. Also, you can use other storage options.

So, in your courseContentOrg controller, you will need to have something like this (here I'm using the version with your basicInfoService, but you can use whatever storage option you want, though this one is preferable):

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

answered Apr 6, 2017 at 10:09

Emin Laletovic

4,3541 gold badge17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rameez Raja Over a year ago

you are right but I am already store the checkboxes data in courseContentOrg controller. '$scope.courseContent = basicInfoService.getQuestionaire().courseContent;'

Rameez Raja Over a year ago

I fetch the checkboxes data also in the console in the first ui-view but the checkbox is not changing to checked. you can see the screen shot in my question also

Emin Laletovic Over a year ago

Ok, but you are not assigning values from $scope.courseContent to your properties $scope.optQ_1 (and 2 and 3). This needs to happen in order for them to be shown in your checkboxes through ng-model.

Rameez Raja Over a year ago

I have assigned scope variable also still the checkboxes are unchecked when I go back.

Collectives™ on Stack Overflow

Checkbox is unchecked while I go back to the ui-view in angularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related