How to display the checked radio button value in angularJs

Question

I need to display selected radio button in the response div,if no option is selected that div will disappear.

View Code:

<body ng-app="QuestionDisplayModule">
    <form>
        <div ng-controller="QuestionDisplayController">
            <div ng-repeat="q in questionsData" style="border:groove 1px green">
                <h4 style="color: darkmagenta">{{q.QText}}</h4>
                <p ng-repeat="a in q.answer1" style="color: cadetblue"><input type="radio"  name="answers" ng-model="options" value="{{a.option1}}" ng-checked="optionselected(options)" />{{a.option1}}</p>
                <div>your answer is :{{selectedoption}}</div>
            </div>
        </div>
    </form>
</body>

Script Code:

<script src="~/Scripts/angular.min.js"></script>
    <script>
        var myApp = angular.module("QuestionDisplayModule", [])
        .controller("QuestionDisplayController", function ($scope, $http, $log) {

            $scope.optionselected = function (options)
            {
                $scope.selectedoption = options;
            }
            $http.get("displayQuestion").then(function(response)
            {
                $log.info(response);
                $scope.questionsData = response.data;
            })
        })
    </script>

You can just display "your answer is : {{options}}"

Hmahwish
– Hmahwish

2016-06-30 11:19:07 +00:00
Commented Jun 30, 2016 at 11:19 — Hmahwish
– Hmahwish, Commented Jun 30, 2016 at 11:19
any error showing?

user6489054
– user6489054

2016-06-30 11:31:27 +00:00
Commented Jun 30, 2016 at 11:31 — user6489054
– user6489054, Commented Jun 30, 2016 at 11:31
no its not showing any error that is problem @Tanisha

anitha
– anitha

2016-06-30 11:33:17 +00:00
Commented Jun 30, 2016 at 11:33 — anitha
– anitha, Commented Jun 30, 2016 at 11:33

Shaishab Roy · Accepted Answer · 2016-06-30 12:35:25Z

1

You should use different name for each question otherwise you will can select only one option for all question and and should use different model for each question and no need to use ng-checked="optionselected(options)" to set selected option value because of you used ng-model.

you can try like this

<div ng-controller="QuestionDisplayController">
      <div ng-repeat="q in questionsData" style="border:groove 1px green">
        <h4 style="color: darkmagenta">{{q.QText}}</h4>
        <p ng-repeat="a in q.answer1" style="color: cadetblue">
          <input type="radio" name="answers+{{$parent.$index}}" ng-model="q.selectedAns" value="{{a.option1}}" />{{a.option1}}</p>
        <div ng-show="q.selectedAns">your answer is :{{q.selectedAns}}</div>
      </div>
    </div>

PLUNKER DEMO

edited Jun 30, 2016 at 12:35

answered Jun 30, 2016 at 12:28

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

anitha Over a year ago

thank you @shaishab roy. am searching for this since 4 hours

anitha Over a year ago

colud you please suggest me how to pagination using angularJs @shaishab roy

Shaishab Roy Over a year ago

you can use angular ui bootstrap to implement pagination easily angular-ui.github.io/bootstrap

Hmahwish · Accepted Answer · 2016-06-30 11:22:04Z

0

Use ng-show/ng-hide to display the div accordingly . Like

 <div ng-show="selectedoption != null">your answer is :{{selectedoption}}</div>

You can also use ng-if . Also you can check if selectedoption is blank .

Read :- https://docs.angularjs.org/api/ng/directive/ngShow

answered Jun 30, 2016 at 11:22

Hmahwish

2,2328 gold badges27 silver badges45 bronze badges

6 Comments

anitha Over a year ago

first i need to display the selected option value that is not working fine @neda

anitha Over a year ago

<div ng-show="selectedoption != null">your answer is :{{selectedoption}}</div> if i use the when i select option for one question it will show for all questions with same option value @neda

Hmahwish Over a year ago

Then you have to give scope value of the checkbox different for each repeat. try changing as ng-model="q.options" and then do <div ng-show="q.options != null"

anitha Over a year ago

how i need to pass model value to controller <p ng-repeat="a in q.answer1" style="color: cadetblue"><input type="radio" name="answers" ng-model="{{a.option1}}" value="{{a.option1}}" ng-click="optionselected()" />{{a.option1}}</p> @neda

Hmahwish Over a year ago

You dont need curly braces here just ng-model="a.option1"

|

user6489054 · Accepted Answer · 2016-06-30 11:44:17Z

0

You can simply do like did in the following fiddle.

http://jsfiddle.net/vishnusuresan/Lvc0u55v/6247/

simply use

  <div ng-controller="MyCtrl">
 <body >
  <form>
    <div >
        <div  style="border:groove 1px green">
            <h4 style="color: darkmagenta"></h4>
            <p style="color: cadetblue"><input type="radio"  name="answers" ng-model="options" value="value1" ng-checked="optionselected(options)" /></p>
            <div>your answer is :{{options}}</div>
        </div>
    </div>
</form>

I don't know what you want to accomplish.

answered Jun 30, 2016 at 11:44

user6489054

1 Comment

anitha Over a year ago

In view list of questions with options i.e one question with 4 options so when i select one option form the respective question that answer should display in "your answer is": like @Tanisha

Collectives™ on Stack Overflow

How to display the checked radio button value in angularJs

3 Answers 3

3 Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related