如何以angularJs显示选中的单选按钮值

Question

我需要在响应div中显示选中的单选按钮，如果未选择任何选项，则div将消失。

查看代码：

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

Answer 1

您应为每个问题使用不同的名称，否则您将只能为所有问题选择一个选项，并且应为每个问题使用不同的模型，并且由于以下原因，无需使用ng-checked="optionselected(options)"来设置选定的选项值您使用ng-model 。

你可以这样尝试

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

朋克演示

Answer 2

使用ng-show / ng-hide相应地显示div。 喜欢

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

您也可以使用ng-if。 您也可以检查selectedoption是否为空。

阅读： -https : //docs.angularjs.org/api/ng/directive/ngShow

Answer 3

您可以像在下面的小提琴中那样简单地进行操作。

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

只需使用

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

我不知道你想完成什么。

如何以angularJs显示选中的单选按钮值

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-06-30 12:28:11

解决方案2
0 2016-06-30 11:22:04

解决方案3
0

如何以angularJs显示选中的单选按钮值

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-06-30 12:28:11

解决方案2 0 2016-06-30 11:22:04

解决方案3 0

解决方案1
1 已采纳 2016-06-30 12:28:11

解决方案2
0 2016-06-30 11:22:04

解决方案3
0