AngularJS checkbox avoid counting when uncheck checkBox

Question

I got a bug: When I uncheck the answer, I do not want to count how many times we select this answer? We will only count the number when we check the answer. For example, I check "Yes", I uncheck "Yes", I check "Yes" again, I will only show "Yes" was selected 2 times, instead of 3 times.

I read some posts about this issue, but cannot make it work by using checked property?

<input type="checkbox" ng-change="answerSelected(ans)" ng-model="checkAnswer">{{ans.answer}}

Sachila Ranawaka · Accepted Answer · 2017-07-05 04:34:55Z

1

change the ng-model to object property like ng-model="ans.checkAnswer"

<input type="checkbox" ng-change="answerSelected(ans)" ng-model="ans.checkAnswer">{{ans.answer}}

Then change the function like this

$scope.answerSelected = function(checkAnswer) {
    if (checkAnswer.checkAnswer) {
        checkAnswer.count++;
    }
    $scope.answerBoxSelected = true;
};

Demo

answered Jul 5, 2017 at 4:34

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

Comments

FullStackDeveloper · Accepted Answer · 2017-07-05 05:00:46Z

0

Just add a check like this,

  if (checkAnswer) {
      ans.count++;
      $scope.answerBoxSelected = true;
  }

DEMO

// Code goes here

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $scope.questions = [{
      id: 1,
      question: "Do you like Foo?",
      answers: [{
        answer: "Yes",
        count: 0,
        id: 1,
        question_id: 1
      }, {
        answer: "No",
        count: 0,
        id: 2,
        question_id: 1
      }]
    },

    {
      id: 2,
      question: "Do you like Bar?",
      answers: [{
        answer: "Yes",
        count: 0,
        id: 1,
        question_id: 2
      }, {
        answer: "No",
        count: 0,
        id: 2,
        question_id: 2
      }]
    }
  ]

  $scope.question_index = 0;

  $scope.answerSelected = function(checkAnswer,ans) {
    if (checkAnswer) {
      ans.count++;
    }
     $scope.answerBoxSelected = true;
  };

  $scope.nextQuestion = function() {
    $scope.question_index++;
    $scope.answerBoxSelected = false;
  };
});

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <div ng-app="myApp" ng-controller="myCtrl">

    <div class="form-group" ng-if="question_index < questions.length">
      <div ng-repeat="item in questions">
        <div ng-if="question_index == $index">
          <h2>{{item.question}}</h2>
          <div ng-repeat="ans in item.answers">
            <input type="checkbox" ng-change="answerSelected(checkAnswer,ans)" ng-model="checkAnswer">{{ans.answer}}
            <br>
          </div>
          

          <div ng-if="answerBoxSelected" class="alert alert-warning">
            <h3>Answer Selection Summary</h3>
            <div ng-repeat="ans in item.answers">
              <p>
                "{{ans.answer}}" Has been selected {{ans.count}}
                <span ng-if="ans.count == 0">time</span>
                <span ng-if="ans.count > 0">times</span>
                <p>
            </div>
          </div>
          
          <button class="btn btn-info btn-lg" ng-if="answerBoxSelected && question_index < questions.length - 1" ng-click="nextQuestion()">Next Question > </button>
          
        </div>
      </div>
    </div>

    <div class="alert alert-success" ng-if="question_index == questions.length - 1 && answerBoxSelected">
      Congratulations! You answered all the questions. Good job!
    </div>
  </div>

  <script src="script.js">
 
  </script>
</body>

</html>

edited Jul 5, 2017 at 5:00

FullStackDeveloper

9981 gold badge18 silver badges42 bronze badges

answered Jul 5, 2017 at 4:32

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

3 Comments

FullStackDeveloper Over a year ago

Look like this is not a good answer. Because if my answer is "I am good", so we may not hard code for that checking: if (checkAnswer.answer == 'Yes')

Sajeetharan Over a year ago

you do not have to hardcode just check the status true or false, check the demo

FullStackDeveloper Over a year ago

I can understand your solution better. Thanks. Are you also interested in this interesting challenge from me? stackoverflow.com/questions/44916920/…

31piy · Accepted Answer · 2017-07-05 04:36:23Z

0

One workaround is to pass the element itself to the answerSelected method, and check its checkAnswer property. We will only increment the count if this property is true.

<input type="checkbox" ng-change="answerSelected(ans, this)" ng-model="checkAnswer">{{ans.answer}}

$scope.answerSelected = function(checkAnswer, elem) {
  if (elem.checkAnswer === true) {
    checkAnswer.count++;
  }

  $scope.answerBoxSelected = true;
};

answered Jul 5, 2017 at 4:36

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Comments

Chava Geldzahler · Accepted Answer · 2017-07-05 04:49:51Z

0

You can call the function conditionally only when the checbox is checked:

<input type="checkbox" ng-change="!checkAnswer || answerSelected(ans)" ng-model="checkAnswer">{{ans.answer}}

When the checkbox is checked, checkAnswer will evaluate to true, and the function will be called.

When the checkbox is unchecked, checkAnswer will evaluate to false, and the function will not be called.

Here's a plunker

edited Jul 5, 2017 at 4:49

answered Jul 5, 2017 at 4:33

Chava Geldzahler

3,7501 gold badge20 silver badges32 bronze badges

Collectives™ on Stack Overflow

AngularJS checkbox avoid counting when uncheck checkBox

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related