CODEWITHSUNDEEP
javascriptangularjs
user990951
user990951

Reputation: 1479

Clear Radio Button on ng-disabled

Below is how I a implemented my code which I modified from Ng-repeat hiding radio button based on other radio answers selected. What I need help with is clearing the radio button when it is removed/disabled == true of that answer.

If the user starts with Q3 and selects answer31 then goes back to Q1 and selects answer11, the question.selectedAnswer still shows up as answer31.

Any help is appreciated 

var app = angular.module('plunker', []);


app.controller('MainCtrl', ['$scope',
  function($scope) {
    
    function getAnswer(qid, aid) {
        var qs = $scope.questions, q;
        for (var i = 0; i < qs.length; ++i) {
          if (qs[i].qid === qid) {
            q = qs[i];
            break;
          }
        }
        if (q) {
          var as = q.Answer;
          for (i = 0; as.length; ++i) {
            if (as[i].aId === aid) {
              return as[i];
            }
          }
        }
    }
    
    
    function doRemove(q, a) {
      if (a.removes && a.removes.length) {
        for (var i = 0; i < a.removes.length; ++i) {
          var r = a.removes[i],
              answer = getAnswer(r.qid, r.aId);
          if (answer) {
            answer.isDisabled = (q.selectedAnswer == a.answertxt);
          }
        }
      }
    }
    
    $scope.select = function (q, a) {
      var as = q.Answer;
      
      for (var i = 0; i < as.length; ++i) {
        var answer = as[i];
        doRemove(q, answer);
      }
    };

    $scope.questions = [{
        questiontxt: 'Please select your Age range',
        qid: 1234,
        Answer: [{
          answertxt: "answer11",
          aId: 83493,
          hides: [{
            qid: 5678,
            aId: 67107
          }],
          removes: [{
            qid: 4321,
            aId: 32342
          }]
        }, {
          answertxt: "answer12",
          aId: 1223,
        }, {
          answertxt: "answer13",
          aId: 1223
        }]
      },
      {
        questiontxt: 'Please select your favorite activity',
        qid: 5678,
        Answer: [{
          answertxt: "answer21",
          aId: 90886
        }, {
          answertxt: "answer22",
          aId: 67107
        }]
      },
      {
        questiontxt: 'Please select your favorite food',
        qid: 4321,
        Answer: [{
          answertxt: "answer31",
          aId: 32342
        }, {
          answertxt: "answer32",
          aId: 79130
        }]
      }
    ];
  }
]);
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-repeat="question in questions">
    <div class="row">
      <br/><span>Q{{$index+1}}. {{question.questiontxt}}</span>
    </div>
    <div ng-repeat="answer in question.Answer">
      <div ng-if="!answer.isDisabled">
        <input type="radio"
          ng-change="select(question, answer)"
          ng-disabled="answer.isDisabled"
          ng-model="question.selectedAnswer" 
          ng-value="answer.answertxt" />
          <span>{{answer.answertxt}}</span>
      </div>
    </div>
  </div>

</body>

</html>

update

I want to make sure my intent is clear.

If the user starts on Q1 and selects "answer11" in Q1 you can see that in Q3 "answer31" disappears. Making it not possible for the user to select "answer31"

But if the user starts on Q3 and selects "answer31" in Q3, the answer is still selected even though the user selects "answer11" in Q1 (which makes the answer disappear). In the backend "answer31" is still selected.

Please let me know if this makes sense. Looking at the one of the answers received, the solution might be to hide Q3 until a selection is made in Q1. Which might be a different question.

Upvotes: 1

Views: 242

Answers (1)

Canet Robern
Canet Robern

Reputation: 1069

I'm not sure if I understood your purpose exactly.

But I've made a fiddle that might be able to help you.

Check this fiddle

$scope.showQuestion = function(index, answer){
    $scope.answerArr.length = index;
    var questionNum = 0;    //  for innitializing radio after this question
    angular.forEach($scope.questions, function(question){
        if(index < questionNum){
            delete question.selectedAnswer;
        }
        questionNum++;
    });
    $scope.answerArr.push(answer);
};

Is this what you want to do?

If not, give me some feedback.

I hope I've understood what you want and this fiddle is near from perfect for your purpose. :)

.

.

.

UPDATED

First, sorry for my misunderstanding of your question.

I think maybe this time, the fiddle what I'll bring to you, is almost proper to your intent.

Updated fiddle

You can test check boxes of 'Q1' or 'Q2'.

But in this fiddle, the way handling $scope.questions is different from yours.

So it might be too hard to understanding my codes, even though I've added comment each lines.

Moreover, It's been a short time I've started programming, you might think this is a kind of 'hard coding'. :D

.

.

UPDATED2

This is finally well working fiddle

I just hope this can be a little helpful for you, or brought a good hint to you.

Upvotes: 2

Related Questions