在 AngularJS 中设置单选按钮

Question

How can I set a radiobutton? I have got 3 options. When I change the radiobutton to eg value NC . I would like to reset it back to value F after completing a function.

<div>
    <label>
    <input type="radio" id="ns_classF" ng-model="ns_class" value="F" ng-disabled='btn_radio_ns_class_disable'>
    <?php echo $lang['LBL_INVOICE']; ?>
    </label><br/>
    <label>
    <input type="radio" id="ns_classCN" ng-model="ns_class" value="CN" ng-disabled='btn_radio_ns_class_disable'>
    <?php echo $lang['LBL_CREDITNOTE']; ?>
    </label><br/>
    <label>
    <input type="radio" id="ns_classO" ng-model="ns_class" value="O" ng-disabled='btn_radio_ns_class_disable'>
    <?php echo $lang['LBL_QUOTE']; ?>
    </label>
</div>

This is what I tried:

    $scope.ns_class = 'F' ;
    document.getElementById("ns_classF").checked = true;
    document.getElementById("ns_classCN").checked = false;
    document.getElementById("ns_classO").checked = false;

The radio button changes, but the scope does not have the value F .

Answer 1

Here you are. I also created a JSFiddle . You don't need to native JavaScript like document.getElementById("ns_classF").checked = true; . Here you can read about it in the AngularJS documentation about radio buttons .

View

<div ng-controller="MyCtrl">
  <div>
    <label>
      <input type="radio" 
             ng-model="nsClass" 
             value="F" 
             ng-disabled="btn_radio_ns_class_disable">
      F</label><br/>
    <label>
      <input type="radio" 
             ng-model="nsClass" value="CN" 
             ng-disabled="btn_radio_ns_class_disable">
      CN</label><br/>
    <label>
      <input type="radio"
             ng-model="nsClass" 
             value="O" 
             ng-disabled="btn_radio_ns_class_disable">
      O</label>
    <button ng-click="click()">
      Cick me
    </button>
  </div>
</div>

AngularJS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.nsClass = '';

    $scope.click = function () {
       $scope.nsClass = 'F';
    }
}

Answer 2

Working demo :

 var myApp = angular.module('myApp',[]); myApp.controller('MyCtrl',function($scope) { $scope.ns_class = ''; $scope.resetRadio = function(val) { $scope.ns_class = 'F'; } });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <div> <label> <input type="radio" id="ns_classF" ng-model="ns_class" value="F" ng-disabled='btn_radio_ns_class_disable'> F </label><br/> <label> <input type="radio" id="ns_classCN" ng-model="ns_class" value="CN" ng-disabled='btn_radio_ns_class_disable' ng-click="resetRadio(ns_class)"> CN </label><br/> <label> <input type="radio" id="ns_classO" ng-model="ns_class" value="O" ng-disabled='btn_radio_ns_class_disable' ng-click="resetRadio(ns_class)"> O </label> </div> </div>