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

score 1 · Answer 1 · answered Jul 05 '17 at 04:34

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

score 0 · Accepted Answer · edited Jul 05 '17 at 05:00

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>

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') — FullStackDeveloper, Jul 05 '17 at 04:34
you do not have to hardcode just check the status true or false, check the demo — Sajeetharan, Jul 05 '17 at 04:39
I can understand your solution better. Thanks. Are you also interested in this interesting challenge from me? https://stackoverflow.com/questions/44916920/angularjs-randomly-show-data-bug — FullStackDeveloper, Jul 05 '17 at 05:02

Chava Geldzahler · Answer 3 · 2017-07-05T04:49:51.620

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 05 '17 at 04:49

answered Jul 05 '17 at 04:33

Chava Geldzahler

3,605
1
18
32

score 0 · Answer 4 · answered Jul 05 '17 at 04:36

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

AngularJS checkbox avoid counting when uncheck checkBox

4 Answers4

Linked