AngularJS复选框可避免在取消选中复选框时进行计数 [英] AngularJS checkbox avoid counting when uncheck checkBox

查看:92
本文介绍了AngularJS复选框可避免在取消选中复选框时进行计数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是我在Plunker中运行的代码

我有一个错误:当我取消选择答案时,我不想计算选择此答案的次数?当我们检查答案时,我们只会计算数字.例如,我选中是",取消选中是",再次选中是",我只会显示是"被选择了2次,而不是3次.

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

推荐答案

只需添加这样的支票,

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

演示

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

这篇关于AngularJS复选框可避免在取消选中复选框时进行计数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆