繁体   English   中英

根据来自服务器的值选择默认单选按钮选项

[英]Select default radio button option based on value coming from server

我正在使用angularjs编写测验引擎,并且能够成功加载选项的问题,并且还实现了NEXT和BACK按钮,该按钮现在可以正常工作,但是我希望当用户单击BACK或NEXT按钮时, -如果问题已得到回答,则选择上一个选择。

每个问题都有4个选项,我在选项名称“ IsSelected”上有一个属性,该属性用于确定用户先前采用的选项。

我想要它,以便当用户交叉检查答案时,默认情况下应检查先前选择的任何先前选项,这是我目前所处的位置。 我看过这个问题

需要默认选择一个Angular JS单选按钮 ,该按钮在设置默认值方面可以解决类似问题,但不完全是此设置。

HTML代码:

<div class="col-lg-offset-2 col-lg-5" data-ng-repeat="item in items" style=" border:#000 1px solid;padding:10px 40px 40px 40px">
        <h3 style="color: #0000ff">Question <b style="color:red">{{item.QId}}</b> of <b style="color:green">{{item.QCount}}</b></h3>
        <div>


            <!--<div id="first">{{item.QId}}</div>-->
            <h2>{{item.QId}}. {{item.QText}} </h2>
        </div>
        <div data-ng-repeat="choice in item.AnswerCh">

            <input type="radio" name="choize" data-ng-model="choice.IsSelected" value="choice.IsSelected" /> {{choice.Text}}

        </div>
        <br />
        <div id="ref" style="display: none">{{item.QId}}</div>
        <div id="you">{{choice.choize.Text}}</div>

JS代码:

  $scope.getNext = function () { var quet = $('#ref').html(); var answ = $('#you').html(); cbtFact.getNext().update({q:answ,v:quet }, function (data, status, headers, config){ $scope.items = []; $scope.items = data; }, function (data, status, headers, config) { }); }; $scope.getPrevious = function () { var quet = $('#ref').html(); var answ = $('#you').html(); cbtFact.getPrevious().update({ q: answ, v: quet }, function (data, status, headers, config) { $scope.items = []; $scope.items = data; function (data, status, headers, config) { }); }; 

像这样使用ng-if怎么样?

小提琴

<div data-ng-repeat="choice in item.AnswerCh">
   <span ng-if="choice.IsSelected">
      <input type="radio" name="choize" data-ng-model="choice.IsSelected" value="choice.IsSelected" checked/> {{choice.Text}}
   </span>
   <span ng-if="!choice.IsSelected">
      <input type="radio" name="choize" data-ng-model="choice.IsSelected" value="choice.IsSelected" /> {{choice.Text}}
   </span>
</div>

或使用Angular Js ngChecked属性

小提琴

 <div data-ng-repeat="choice in item.AnswerCh">    
     <input type="radio" name="choize" data-ng-model="choice.IsSelected" value="choice.IsSelected" data-ng-checked="choice.IsSelected" /> {{choice.Text}}    
 </div>

更新:

使用ng-modelng-value

小提琴

尽管以上两个代码都可以正常工作,但与ng-model一起使用时仍存在一些问题。

根据Angular Js 文档,可以使用ng-model和ng-value本身来实现此功能,因此,这应该是推荐的方式。 ng-value应该是选择表达式时应将其设置为的值。

<div data-ng-repeat="choice in item.AnswerCh">
        <input type="radio" name="choize" data-ng-model="choice.IsSelected" ng-value="true" /> {{choice.Text}}       
 </div>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM