Select 基于来自服务器的值的默认单选按钮选项

Question

我正在使用 angularjs 编写一个测验引擎，并且已经能够使用选项成功加载问题，并且还实现了 NEXT 和 BACK 按钮，现在可以正常工作，但我希望当用户单击 BACK 或 NEXT 按钮，如果问题已得到回答，它会与先前的选择一起预先选择。

每个问题都有 4 个选项，我在选项名称 'IsSelected' 上有一个属性，我用它来确定用户之前选择的选项。

我想要它，以便当用户交叉检查答案时，默认情况下应该检查之前选择的任何选项，这就是我目前遇到的问题。我看过这个问题

Need to Default select an Angular JS Radio Button 它在设置默认值方面解决了类似的问题，但不完全是这个。

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) {
            });

        };

Answer 1

这样使用ng-if怎么样..

Fiddle

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

或使用Angularjs ngChecked属性

Fiddle

 <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-model 和 ng-value

Fiddle

虽然上面的代码都可以工作，但它在与 ng-model 一起工作时遇到了一些问题。

根据 Angular Js documentation 可以像这样使用 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>

Select 基于来自服务器的值的默认单选按钮选项

Select default radio button option based on value coming from server

javascript

angularjs

radio-button

angularjs-ng-repeat