Get the value of radio button and store it , then show it

ionic-v1
1

How to Get the value of radio button and store it , then show it ?

<div class="card">
     <div class="item item-image">
        <img src="img/Game-Img/Debug-img/level-1/{{question}}.png" id="question">
      </div>
      </div>
        <ul id="options">
          <li ng-repeat="option in options">
            <label class="item item-radio">
              <input  type="radio" name="answer" value="{{option}}"  required>
             <div class="item-content" >
              <center><strong>{{option}}</strong></center>
              </div>
               <i class="radio-icon ion-checkmark"></i>
            </label>
          </li>
        </ul>
        <br>
        <center>
        <button ng-click="checkAnswer()" class="button button-block button-stable" ng-show="answerMode">Submit Answer</button>
        </center>  
      
      </div>
    </div>
     </div>



  .factory('questionFactory', function() {
    
        var questions = [
            {
                question: "Q1",
                options: ["object", "main", "class", "case"],
                answer: "class"
            },
            {
                question: "Q2",
                options: ["println", "printf", "printline", "print"],
                answer: "println"
            },
            {
                question: "Q3",
                options: ["void", "void main", "static void", "static"],
                answer: "void"
            },
            {
                question: "Q4",
                options: ["println", "out", "system", "string"],
                answer: "out"
            },
2

Check the angular help for examples - https://docs.angularjs.org/api/ng/input/input[radio] or u can use Ionic radio - http://ionicframework.com/docs/api/directive/ionRadio/

3

How about storing it ?

4

It will be store in variable that u defined in ng-model, which u must define in controller like:
in controller(i just seted default answers for every questions)
$scope.questions = {q1:‘object’, q2:‘println’, q3:‘void’, q4:‘println’ }
in html:
<input type="radio" ng-model="questions.q1" value="object"> <input type="radio" ng-model="questions.q1" value="main"> <input type="radio" ng-model="questions.q1" value="class"> <input type="radio" ng-model="questions.q1" value="case">

here is plunker

1 Like
5

Wow , Thanks ! :smiley:
And how can I show it ?

<div ng-show="showRadioValues">
          How can I show the Radio Values Here ?
</div>
6

Look at example above