根據來自服務器的值選擇默認單選按鈕選項

Question

我正在使用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) { }); }; 

Answer 1

像這樣使用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-model和ng-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>