angularjs의 라디오 버튼을 사용하여 값을 배열로 푸는 방법

Question

라디오 버튼을 선택할 때마다 값을 배열로 푸싱하려고합니다. 이것을 어떻게 할 수 있습니까?

<div class="form-group" show-errors> 
    <div class="col-sm-12" > 
     <div class="form-group col-xs-12 nopadding" > 
      <label class="control-label" for="mobile">Have you taken any admission tests? (eg. IELTS, GRE, etc)</label> 
      <div class="btn-group col-xs-12 nopadding" data-toggle="buttons"> 
       <label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,admission)" ng-class="{'active':vm.studentObj.test_taken === 'Y'}"> 
        <input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="Y"> Yes 
       </label> 
       <label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,'test_taken','N')" ng-class="{'active':vm.studentObj.test_taken === 'N'}"> 
        <input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="N"> No 
       </label> 
      </div> 
     </div> 
    </div> 
</div> 
<div class="form-group" show-errors> 
    <div class="col-sm-12" > 
     <div class="form-group col-xs-12 nopadding" > 
      <label class="control-label" for="mobile">Educational Info (High School/ Secondary/ Primary/ Pre School)</label> 
      <div class="btn-group col-xs-12 nopadding" data-toggle="buttons"> 
       <label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,Educational)" ng-class="{'active':vm.studentObj.test_taken === 'Y'}"> 
        <input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="Y"> Yes 
       </label> 
       <label class="col-xs-6 btn btn-white" ng-click="checkMultiSelect(vm.studentObj,'test_taken','N')" ng-class="{'active':vm.studentObj.test_taken === 'N'}"> 
        <input type="radio" name="test_taken" ng-model="vm.studentObj.test_taken" value="N"> No 
       </label> 
      </div> 
     </div> 
    </div> 
</div> 

내 기능을 수동으로 양식을 나타내는 개체를 가져 데이터를 푸시 할 필요가 없습니다

$rootScope.checkMultiSelect = function (data, key) { 
    if (!data) { 
    data = []; 
    } 
    var idx = data.indexOf(key); 
    if (idx > -1) { 
    data.splice(idx, 1); 
    } else { 
    data.push(key); 
    } 
}; 

Answer 1

. Angular의 데이터 바인딩은이 작업을 수행합니다.

<form ng-form="studentForm"> 
    <div class="form-group" show-errors> 
     <div class="col-sm-12" > 
      <div class="form-group col-xs-12 nopadding" > 
       <label class="control-label" for="mobile">Have you taken any admission tests? (eg. IELTS, GRE, etc)</label> 
       <div class="btn-group col-xs-12 nopadding" data-toggle="buttons"> 
        <label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.test_taken === 'Y'}"> 
         <input type="radio" name="test_taken" ng-model="studentObj.test_taken" value="Y"> Yes 
        </label> 
        <label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.test_taken === 'N'}"> 
         <input type="radio" name="test_taken" ng-model="studentObj.test_taken" value="N"> No 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="form-group" show-errors> 
     <div class="col-sm-12" > 
      <div class="form-group col-xs-12 nopadding" > 
       <label class="control-label" for="mobile">Educational Info (High School/ Secondary/ Primary/ Pre School)</label> 
       <div class="btn-group col-xs-12 nopadding" data-toggle="buttons"> 
        <label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.edu_info === 'Y'}"> 
         <input type="radio" name="test_taken" ng-model="studentObj.edu_info" value="Y"> Yes 
        </label> 
        <label class="col-xs-6 btn btn-white" ng-class="{'active':studentObj.edu_info === 'N'}"> 
         <input type="radio" name="test_taken" ng-model="studentObj.edu_info" value="N"> No 
        </label> 
       </div> 
      </div> 
     </div> 
    </div> 
</form> 

누군가가 첫 번째 라디오를 '예'로, 두 번째 라디오를 '아니오'로 채 웁니다. studentObj의 출력은

{ 
    test_taken: 'Y', 
    edu_info: 'N' 
} 

입니다. 이것은 Angular의 아름다움입니다. 값을 수동으로 푸시 할 필요가 없으며 데이터 바인딩이이 모든 작업을 수행하므로 불필요한 코드로 컨트롤러를 어지럽히 지 않아도됩니다.