Question

我遇到了一个错误：当我取消选中答案时，我不想计算我们选择这个答案的次数？我们只会在检查答案时计算数字。例如，我检查“是”，我取消选中“是”，我再次选中“是”，我只会选择“是”被选中2次，而不是3次。

我阅读了一些关于此问题的帖子，但是使用checked属性无法使其工作？

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

Answer 1

将ng-model更改为对象属性，如navigation controller

ng-model="ans.checkAnswer"

然后改变这个功能

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

Demo

Answer 2

只需添加这样的支票，

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

<强>样本

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

只有在选中了checbox时才能有条件地调用该功能：

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

选中该复选框后，checkAnswer将评估为true，并且将调用该函数。

取消选中该复选框后，checkAnswer将评估为false，并且不会调用该函数。

这是plunker

Answer 4

一种解决方法是将元素本身传递给answerSelected方法，并检查其checkAnswer属性。如果此属性为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;
};

取消选中checkBox时，AngularJS复选框会避免计数

4 个答案: