AngularJS hộp kiểm tránh đếm khi bỏ chọn hộp kiểm

Here is my running code in Plunker AngularJS hộp kiểm tránh đếm khi bỏ chọn hộp kiểm

tôi nhận được một lỗi: Khi tôi bỏ chọn câu trả lời, tôi không muốn đếm bao nhiêu lần chúng ta chọn câu trả lời này? Chúng tôi sẽ chỉ đếm số khi chúng tôi kiểm tra câu trả lời. Ví dụ, tôi chọn "Có", tôi bỏ chọn "Có", tôi chọn "Có" một lần nữa, tôi sẽ chỉ hiển thị "Có" đã được chọn 2 lần, thay vì 3 lần.

Tôi đọc một số bài viết về vấn đề này, nhưng không thể làm cho nó hoạt động bằng cách sử dụng thuộc tính đã kiểm tra?

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

Nguồn

2017-07-05 EntryLeveDeveloper

Chỉ cần thêm một tấm séc như thế này,

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>

Nguồn

2017-07-05 04:32:41 Sajeetharan

Có vẻ như đây không phải là câu trả lời hay. Bởi vì nếu câu trả lời của tôi là "Tôi tốt", vì vậy chúng tôi có thể không mã cứng cho việc kiểm tra đó: if (checkAnswer.answer == 'Yes') – EntryLeveDeveloper

bạn không phải hardcode chỉ kiểm tra trạng thái đúng hay sai, kiểm tra bản demo – Sajeetharan

Tôi có thể hiểu giải pháp của bạn tốt hơn. Cảm ơn. Bạn cũng quan tâm đến thử thách thú vị này từ tôi? https://stackoverflow.com/questions/44916920/angularjs-randomly-show-data-bug – EntryLeveDeveloper

Bạn có thể gọi hàm có điều kiện chỉ khi checbox được kiểm tra:

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

Khi hộp kiểm được chọn, checkAnswer sẽ đánh giá là đúng và chức năng sẽ được gọi.

Khi hộp kiểm không được chọn, checkAnswer sẽ đánh giá là sai và chức năng sẽ không được gọi.

Dưới đây là một sự thay đổi plunker

Nguồn

2017-07-05 04:33:58

những ng-mô hình đối tượng tài sản như ng-model="ans.checkAnswer"

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

Sau đó thay đổi các chức năng như thế này

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

Demo

Nguồn

2017-07-05 04:34:55

Một cách giải quyết là vượt qua phần tử chính nó theo phương pháp answerSelected và kiểm tra thuộc tính checkAnswer của nó. Chúng tôi sẽ chỉ tăng số lượng nếu thuộc tính này là 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; 
};

Nguồn

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

AngularJS hộp kiểm tránh đếm khi bỏ chọn hộp kiểm

Trả lời

Các vấn đề liên quan