All geek questions in one place

AngularJS checkbox does not take into account when unchecking checkBox

Here is my launch code in Plunker

I have a mistake: when I remove this 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 shoot “Yes”, I check “Yes” again, I will only show “Yes”, not 3 times.

I read a few posts about this problem, but can't get them to work using a proven property?

<input type="checkbox" ng-change="answerSelected(ans)" ng-model="checkAnswer">{{ans.answer}}
+5
source share
4 answers

Just add a check like

  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>
+1
source

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

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

Then change a function like this

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

Demo

+1
source

You can call a function conditionally only when checking the checkbox:

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

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

If unchecked, checkAnswer will evaluate to false and the function will not be called.

Here plunker

0
source

One way is to pass the element itself to the answerSelected method and check its checkAnswer property. We will increment the counter only 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; };
0
source

Source: https://habr.com/ru/post/1269501/

More articles:


All Articles