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>

PLUNKER DEMO

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 个答案: