Binding Radio buttons to if statements in AngularJS

Question

I am looking for the best way to swap between if statements using radio buttons. I am doing a calculation in my controller, that uses the radio buttons to determine which calculation to do, so if you select Radio1 it will do Calc1, and if you select Radio2 it will do Calc2. But you must be able to swap between Calc1 and Calc2 as you please, and not be limited to one or the other per page refresh.

Here is an example of what I am looking for, using my current controller. Note My firm isn't using $Scope directly, we use vm. which is the equivalent to $Scope for us.

if (vm.isFemale) {
            return Math.round((66 + (6.23 * vm.weight) + (12.7 * ((vm.feet * 12) + vm.inches)) - (6.8 * vm.age)) * vm.dropdown);
        }
        if (vm.isMale) {
            return Math.round((655 + (4.35 * vm.weight) + (4.7 * ((vm.feet * 12) + vm.inches)) - (4.7 * vm.age))) * vm.dropdown;
        }
        if (output == null || output == "NaN")
            return;

    }

I am new to AngularJS, i looked in the API and some forms, but I couldn't find anything that seemed to be useful to my current situation, If I overlooked something, please point me in the right direction.

EDIT

This is how I am defining the radio buttons in the HTML pages:

                    <label for="sex">Sex: </label>
                <label>
                    <input type="radio" ng-model="vm.isMale" />Male
                    <input type="radio" ng-model="vm.isFemale" />Female
                </label>

Please describe how this doesn't work. As an aside, since the calculation logic is the same, maybe it would be better to swap constants (66 instead of 655) instead of the entire calculation. — ryanyuyu
– ryanyuyu, Commented Jul 20, 2015 at 13:03
another aside; using vm isn't "equivalent" to $scope; even when using the ControllerAs pattern, $scope still exists, and vm is actually a child object of it, i.e. $scope.vm.myProperty. therefore, it is still important for us to see how these buttons are defined in the HTML. — Claies
– Claies, Commented Jul 20, 2015 at 13:16
@Claies Thank you for clarifying that, I wasn't aware that VM was a child object of $Scope, most of my learning is coming internally, so a lot of what they tell me, i just have to roll with and assume it correct. I added the HTML code that you requested, its not much, but hopefully it should clarify a few things. — Bengejd
– Bengejd, Commented Jul 20, 2015 at 13:45

Rob · Accepted Answer · 2015-07-20 13:52:44Z

1

You have to add a value attribute for each radio button and set the same model variable for the whole group.

<input type="radio" ng-model="gender" value="female" ng-change="calc=calcFemale">
<input type="radio" ng-model="gender" value="male" ng-change="calc=calcMale">

Additionally here's a fiddle using ng-model and ng-change to swap the calculation function: http://jsfiddle.net/mrc1800k/1/

answered Jul 20, 2015 at 13:52

Rob

5,4911 gold badge35 silver badges34 bronze badges

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

Comments

Shubham Aggarwal · Accepted Answer · 2015-07-20 14:18:29Z

1

vm is not the parent scope, vm itself is a child of parent scope, so rather than using ng-model="vm.isMale" use a scope variable, and specify a value attribute for your radio input tag: EXAMPLE:

<input type="radio" ng-model="age" value="20">
<input type="radio" ng-model="age" value="30">

then you can use $scope.age in switch case or if else ladder to get your job done

answered Jul 20, 2015 at 14:18

Shubham Aggarwal

3532 silver badges16 bronze badges

2 Comments

Bengejd Over a year ago

This allows both of the radio buttons to be toggled at the same time though, unfortunately.

Shubham Aggarwal Over a year ago

Umm not sure but you can try and add ng-change="function()" where function does the required calculation or evaluation.

Joy · Accepted Answer · 2015-07-20 14:59:37Z

You can use ng-model to store the user's selection. The key is: keep the ng-model of two radios to the same model, and then give different values.

Depending on the model value, choose the correct function to calculate. For example http://jsfiddle.net/mrc1800k/2/:

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

function MyCtrl($scope) {
    $scope.gender = 'male';

    function calcByMale () {
        console.log('calcByMale');
    }

    function calcByFemale () {
        console.log('calcByFemale');
    }

    $scope.calc = function () {
        ($scope.gender === 'female') ? calcByFemale() : calcByMale();
    }
}

And HTML:

<div ng-controller="MyCtrl">
<input type="radio" ng-model="gender" value="female">
<input type="radio" ng-model="gender" value="male"> 
<button ng-click="calc()">Calculate</button>
<hr> 
{{gender}}
</div>

Phani Kumar Vadlamani · Accepted Answer · 2015-07-21 06:16:11Z

check out this

var exampleApp = angular.module('exampleApp', [])

exampleApp.controller('testCtrl', function ($scope) {

    $scope.Gender = 'default value'
    $scope.change = function () {
        if ($scope.Gender == 'male') {

            console.log('Execute male context here .........')

        } else {

            console.log("execute female context here .........");
        }
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
    <div ng-app="exampleApp">

        <div ng-controller="testCtrl">
            <label for="sex">
                Sex: </label>
            <label>

                <input type="radio" ng-model="Gender" value="male" ng-change="change()">Male
                <input type="radio" ng-model="Gender" value="female" ng-change="change()">Female

            </label>


            <div ng-switch="Gender">

                <div ng-switch-when="male">

                    <h4>Male is selected you can do what you need</h4>
                </div>

                <div ng-switch-when="female">

                    <h4>female is selected and you can do what you need</h4>
                </div>
            </div>
        </div>
    </div>
</body>

Collectives™ on Stack Overflow

Binding Radio buttons to if statements in AngularJS

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related