角度 - ラジオボタンの形式を確認できません

Question

formにはradioボタンしか付いていません。投稿前にformの有効性を確認する必要があります（ユーザーは何かを選択する必要があります）。ユーザーがラジオボタンを選択した後、ngclassを使用してスタイリングを適用する必要があります。私は2つの問題があります：
1.何らかの理由で、最後のオプションがデフォルトで選択されています。
2.フォーム検証属性を取得できません。データを選択すると、データは更新されません。

plunkr

JS：

app.controller('MainCtrl', function($scope) { 

    $scope.questionObject = [{ 
    "body": "abc" 
    }, { 
    "body": "def" 
    }, { 
    "body": "aghi" 
    } ] 
    $scope.selectAnswer=function(number,obj) 
    { 
    $scope.isChecked=number; 
} 
}); 

HTML：

<div class="form-group" ng-form="form"> 
    <div class="col-lg-8 col-lg-offset-2 col-sm-12"> 
     <div class="row" ng-repeat="obj in questionObject track by $index"> 
     <div class="radio"> 
      <label class="choice" ng-class="{'choiceSelected': isChecked==$index}"> 
      <input type="radio" 
        name="optradio" 
        ng-click="selectAnswer($index,questionObject.correct_answer)" 
        ng-model="radioInput">{{obj.body}} 
      </label> 
     </div> 
     </div> 
    </div> 
    </div> 
    <pre> 
    dirty:{{form.$dirty}} 
    pristine:{{form.$pristine}} 
    </pre> 

EDIT これは、フォームを出力します。更新しないでください

{ 
    "$error": {}, 
    "$name": "form", 
    "$dirty": false, 
    "$pristine": true, 
    "$valid": true, 
    "$invalid": false, 
    "$submitted": false 
} 

Answer 1

このようにしてください。ラジオボタンのng-model属性とng-required属性を探します。

<div name="myForm" novalidate ng-form> 
    <div class="col-lg-8 col-lg-offset-2 col-sm-12"> 
     <div class="row" ng-repeat="obj in questionObject track by $index"> 
     <div class="radio"> 
      <label class="choice" ng-class="{'choiceSelected': isChecked==$index}"> 
     <input type="radio" name="optradio" ng-click="selectAnswer($index,questionObject.correct_answer)" ng-model="data.option" ng-value="obj.body" ng-required="data.option == ''">{{obj.body}} 
     </label> 

     </div> 
     </div> 
    </div> 
    </div> 

    <pre> 
    dirty:{{myForm.$dirty}} 
    pristine:{{myForm.$pristine}} 
    $valid:{{myForm.$valid}} 
    $invalid:{{myForm.$invalid}} 
    </pre> 

Plunker：1がデフォルトで選択されようとしているラジオボタンでhttps://plnkr.co/edit/crpV5QnSGdSv6rUBnTnR?p=preview

Answer 2

。代わりにチェックボックスを使用し、anglejsでそれらを制御して、1つだけが選択されるようにすることができます。

$scope.questionObject = [{ 
    "body": "abc", 
    "selected": false 
    }, { 
    "body": "def", 
    "selected": false 
    }, { 
    "body": "aghi", 
    "selected": false 
    }]; 

その後、ユーザーがselectAnswer機能が一つだけチェックボックスがこれまでに選択されていることを確認するために使用することができ、チェックボックスを選択した場合：：

をこれは、最初はfalseになります選択したオブジェクトプロパティそれぞれの質問を与える行うに

$scope.selectAnswer = function(obj) { 
    angular.forEach($scope.questionObject, function(val) { 
     if (obj !== val) { 
     val.selected = false; 
     } 
    }); 
    }; 

Plunker：https://plnkr.co/edit/0TBDHJEjDpiIjmhd3AqT?p=preview