angularjs checkbox uniknąć liczenia kiedy odznacz pole wyboru

Here is my running code in Plunker angularjs checkbox uniknąć liczenia kiedy odznacz pole wyboru

mam problem: Kiedy zaznaczenie odpowiedzi, nie chcę liczyć ile razy wybrać tę odpowiedź? Liczymy tylko liczbę, gdy sprawdzimy odpowiedź. Na przykład zaznaczam "Tak", odznaczam "Tak", ponownie zaznaczam "Tak", pokazuję tylko "Tak" został wybrany 2 razy, zamiast 3 razy.

Czytałem kilka postów na temat tego problemu, ale nie mogę sprawić, żeby działało, używając sprawdzonej właściwości?

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

Źródło

2017-07-05 EntryLeveDeveloper

Wystarczy dodać czek takiego,

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>

Źródło

2017-07-05 04:32:41 Sajeetharan

Wygląda na to, że nie jest to dobra odpowiedź. Ponieważ, jeśli moja odpowiedź brzmi "jestem dobry", więc nie możemy zakodować tego sprawdzenia: jeśli (checkAnswer.answer == 'tak') – EntryLeveDeveloper

nie musisz się kodować, po prostu sprawdź status prawda lub fałsz, sprawdź wersję demo – Sajeetharan

Rozumiem twoje rozwiązanie lepiej. Dzięki. Czy interesuje Cię również to interesujące wyzwanie ode mnie? https://stackoverflow.com/questions/44916920/angularjs-randomly-show-data-bug – EntryLeveDeveloper

można wywołać funkcję warunkowo tylko wtedy, gdy jest zaznaczona checbox:

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

Gdy pole wyboru jest zaznaczone, checkAnswer oceni true, a funkcja zostanie wywołana.

Po odznaczeniu tego pola wyboru, checkAnswer zmieni wartość na false, a funkcja nie zostanie wywołana.

Oto plunker

Źródło

2017-07-05 04:33:58

Zmiana ng model sprzeciwić nieruchomość jak ng-model="ans.checkAnswer"

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

Następnie zmienić funkcję jak ten

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

Demo

Źródło

2017-07-05 04:34:55

Jednym rozwiązaniem jest przekazać element się do metody answerSelected i sprawdź jej właściwość checkAnswer. Będziemy tylko zwiększać liczbę, jeśli ta właściwość to 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; 
};

Źródło

2017-07-05 04:36:23 31piy

angularjs checkbox uniknąć liczenia kiedy odznacz pole wyboru

Odpowiedz

Powiązane problemy