Unselected radio button value in Angularjs

Question

I've got an angularjs application that has a form/controller that look essentially like this (boiled down to the pertinent stuff):

angular.module('testApp', [])
    .controller('testCtrl', function ($scope) {
    $scope.envelopes = [{
        id: 1,
        name: 'first',
        default_spend: '1'
    }, {
        id: 2,
        name: 'second',
        default_spend: '0'
    }, {
        id: 3,
        name: 'third',
        default_spend: '0'
    }, ];
});

And a form that looks roughly like this:

<div ng-app="testApp">
    <div ng-controller="testCtrl">
        <div ng-repeat="envelope in envelopes">
            <div>{{envelope.name}}
                <input type="radio" name="default_spend" ng-model="envelope.default_spend" ng-value="1" /> 
                Default Spend: {{envelope.default_spend}}
            </div>
        </div>
    </div>
</div>

You can see this in action with this fiddle.

As you can see, the first envelope is marked as the default_spend envelope and the other two aren't. When I select a different envelope, that envelope also gets marked as the default_spend, but when the radio button is unselected, the model value stays the same ("1"). I understand that I'm dealing with a child scope here due to ng-repeat, but is there a way for me to set an "unselected" value without having to jump through hoops with ngChange?

I did not understand.. Whatever selected becomes 1 and others resets back to 0? When you use ng-value it will be bound to the ng-model on selection. — PSL
– PSL, Commented Oct 1, 2014 at 1:44
Adding the "Default Spend: 1/0" part was just for me to see what was set to envelope.default_spend. Ideally, that value would be 1 (on) if the radio is selected and 0 (off) when it's not. The on part works fine, but off doesn't. I understand why, but I think it would be more logical to set the ng-model value to something like "" if the radio is not selected and "1" (or whatever the {ng-}value is) if selected. — jloosli
– jloosli, Commented Oct 1, 2014 at 19:01

PSL · Accepted Answer · 2014-10-01 02:20:40Z

2

Not really. When you use ng-value it is what is going to get bound to the ng-model and in your case all of them are having value 1. Also i really did not get the purpose of toggling 1 and 0, however you could just achieve it this way:-

 <input type="radio" name="default_spend" 
      ng-click="selected.envelope = envelope" />  <!--Register an ng-click and set selected one
      Default Spend: {{getDefSpend(envelope)}}</div> <!-- Show the text based on selection-->

And in your controller:-

$scope.selected = {envelope: $scope.envelopes[0]};

$scope.getDefSpend = function(envelope){
   return $scope.selected.envelope === envelope ? 1 : 0; 
}

//$scope.selected.envelope will be your selected option at any point.

Demo

answered Oct 1, 2014 at 2:20

PSL

124k21 gold badges257 silver badges243 bronze badges

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

Comments

Jonathan Rowny · Accepted Answer · 2014-09-30 21:43:53Z

0

It's because what you have is actually 3 different model values. To work as you want it, you would have ONE model value for all 3. You can either restructure your data, or use ng-change to modify your model manually.

answered Sep 30, 2014 at 21:43

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

Collectives™ on Stack Overflow

Unselected radio button value in Angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related