Set radio button in AngularJS

Question

How can I set a radiobutton? I have got 3 options. When I change the radiobutton to e.g. 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.

I see you asked a lot of question without marking one as right. Please mark the right answer in your questions. I would help other users and its how Stackoverflow works. — lin
– lin, Commented Feb 2, 2017 at 14:57

lin · Accepted Answer · 2017-02-02 15:01:05Z

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';
    }
}

edited Feb 2, 2017 at 15:01

answered Feb 2, 2017 at 14:55

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

data2info Over a year ago

The JSFiddle works perfect. But in my code, this only works one time. Klik the button, radio changes, click on the radiobutton, click on button, radiobutton doesnt change.

lin Over a year ago

@data2info So, please compare your codes with the solution given above. Iam unable to fix errors created by the user itself.

Rohìt Jíndal · Accepted Answer · 2017-02-03 08:41:50Z

0

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>

edited Feb 3, 2017 at 8:41

answered Feb 3, 2017 at 7:23

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

3 Comments

lin Over a year ago

DOM manipuation is not recommend while using AngularJS. Please refer stackoverflow.com/questions/14994391/…

Rohìt Jíndal Over a year ago

@lin Thanks for correcting me. I updated my answer can you please remove downvote from the answer.

lin Over a year ago

Yea, sure =). This looks much better now! You dont need to parse ns_class into resetRadio().

Collectives™ on Stack Overflow

Set radio button in AngularJS

2 Answers 2

View

AngularJS

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

View

AngularJS

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related