vendredi 29 mai 2015

Angular.js: How can I switch between radio and checkbox based on what button is selected?

I'm trying to select one or many of the 4 answers to a quiz based on which button ("Single Answer"/"Multiple Answers") is selected. The issue is that the checkbox is also behaving like radio (though its looking like a checkbox). I think its because I have the "value" attribute which makes it behave like a radio (only 1 item selected at a time).

<li class="list-group-item properties-sidebar">
                <p>Correct Answer Type</p>
                <div class="btn-group btn-group-justified" role="group" aria-label="Single, Multiple, or True/False?">
                  <div class="btn-group" role="group">
                    <button type="button" ng-class="{'btn btn-default': true, 'active': currentAnswerType === 'radio'}" ng-click="selectAnswerType(0)">Single</button>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" ng-class="{'btn btn-default': true, 'active': currentAnswerType === 'checkbox'}" ng-click="selectAnswerType(1)">Multiple</button>
                  </div>
                  <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" ng-click="selectAnswerType(2)">True/False</button>
                  </div>
                </div>
              </li>
              <li class="list-group-item properties-sidebar">
                <p>Answer 1</p>
                <div class="input-group"><span class="input-group-addon"><input type="{{currentAnswerType}}" ng-model="currentQuestion.correctAnswer" value="0" aria-label="..."></span>
                  <input type="text" class="form-control" placeholder="Enter Answer 1 here ..." aria-describedby="sizing-addon3" ng-model="currentQuestion.answers[0]">
                </div>
              </li>
              <li class="list-group-item properties-sidebar">
                <p>Answer 2</p>
                <div class="input-group"><span class="input-group-addon"><input type="{{currentAnswerType}}" ng-model="currentQuestion.correctAnswer" value="1" aria-label="..."></span>
                  <input type="text" class="form-control" placeholder="Enter Answer 2 here ..." aria-describedby="sizing-addon3" ng-model="currentQuestion.answers[1]">
                </div>
              </li>
              <li class="list-group-item properties-sidebar">
                <p>Answer 3</p>
                <div class="input-group"><span class="input-group-addon"><input type="{{currentAnswerType}}" ng-model="currentQuestion.correctAnswer" value="2" aria-label="..."></span>
                  <input type="text" class="form-control" placeholder="Enter Answer 3 here ..." aria-describedby="sizing-addon3" ng-model="currentQuestion.answers[2]">
                </div>
              </li>
              <li class="list-group-item properties-sidebar">
                <p>Answer 4</p>
                <div class="input-group"><span class="input-group-addon"><input type="{{currentAnswerType}}" ng-model="currentQuestion.correctAnswer" value="3" aria-label="..."></span>
                  <input type="text" class="form-control" placeholder="Enter Answer 4 here ..." aria-describedby="sizing-addon3" ng-model="currentQuestion.answers[3]">
                </div>
              </li>

How can I get either radio or checkbox behavior based on whether the answer type is "radio" or "checkbox" (selected by pressing the appropriate button in the button group)




Aucun commentaire:

Enregistrer un commentaire