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

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

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.
@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

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>

DOM manipuation is not recommend while using AngularJS. Please refer stackoverflow.com/questions/14994391/…
@lin Thanks for correcting me. I updated my answer can you please remove downvote from the answer.
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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

View

AngularJS

2 Comments

3 Comments

Linked

Related