toggle Radio button value in AngularJs

Question

I have two Radio Button , I need to toggle their values based on checking for example convert value of a to TRUE when check it and set value of B to FALSE and vise versa

<ion-radio ng-model="form.Domistric" value="1"  ng-value="!form.International">Domestic</ion-radio><br />
<ion-radio ng-model="form.International" value="0" ng-value="!form.Domistric">International</ion-radio>

Does there a dynamic why in angular to do that?

Are they related to each other, if yes why two different ng-models — nivas
– nivas, Commented Feb 19, 2017 at 12:03
Just suggestion first you need to understand radio buttons, they are just multi choice but you have to choose only one value if they are interrelated see example here, docs.angularjs.org/api/ng/input/input%5Bradio%5D if you need two values they must not be related to each other — nivas
– nivas, Commented Feb 19, 2017 at 12:45
If you want two values then you have to implement checkboxes here instead of radio buttons — nivas
– nivas, Commented Feb 19, 2017 at 12:46

digit · Accepted Answer · 2017-02-19 10:27:01Z

2

You can use ng-true-value and ng-false-value

<ion-radio ng-model="form.Domistric"  ng-true-value="!form.International" ng-false-value="form.International">Domestic</ion-radio><br />
<ion-radio ng-model="form.International" ng-true-value="!form.Domistric" ng-false-value="form.Domistric">International</ion-radio>

answered Feb 19, 2017 at 10:27

digit

4,5653 gold badges30 silver badges46 bronze badges

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

1 Comment

Yosra Nagati Over a year ago

it doesnot work probably , I think ng-true-value and ng-true-false is related to checkbox

nivas · Accepted Answer · 2017-02-19 13:25:36Z

Try below code it solves your problem just replace <input> with <ion-checkbox> </ion-checkbox>

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

app.controller('MainCtrl', function ($scope) {
  $scope.form = {};
  $scope.changeD = function () {
    $scope.form.International = false;
  }
  $scope.changeI = function () {
    $scope.form.Domistric = false;
  }
});

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  </head>
  <body ng-controller="MainCtrl">
    <input type="checkbox" ng-model="form.Domistric" ng-change="changeD()" />Domestic 
    <input type="checkbox" ng-model="form.International" ng-change="changeI()" />International
  </body>
  <p>Domestic: {{form.Domistric}}</p>
  <p>International: {{form.International}}</p>
</html>

Collectives™ on Stack Overflow

toggle Radio button value in AngularJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related