Passing radio value with angularjs

Question

I have a form that has a set of radio buttons (3 choices), and I am using angular and the ng-repeat directive to populate the html:

<div ng-repeat="fruit in fruitbasket">
  <input type="radio" name="fruit" data-ng-model="fruit.isSelected">{{fruit.id}}
</div>

the inside of the controller for the fruit basket looks like this:

$scope.fruitbasket = [{isSelected: false, id: "Orange", value: "1"}, {isSelected: true, id: "Pear", value: "2"}, {isSelected: false, id: "Apple", value: "3"}]

The choices in the view are Orange, Pear, and Apple, but after one is selected I want to pass the numeric "value"

Not sure how to do this in angular, I have tried several things, but non successful. Each time the passed value shows as nil

How does a connected element of an object get passed from a radio button in Angularjs?

TheHippo · Accepted Answer · 2013-04-15 22:50:19Z

2

Here's how you do it:

isSelected is not needed. The fruitbasket is not part of your model, only the selected fruit is.

$scope.fruitbasket = [
    {id: "Orange", value: "1"},
    {id: "Pear", value: "2"},
    {id: "Apple", value: "3"}
];

$scope.model={selectedFruit:2};

Assign the value (fruit.value) to each option and bind it to your model (model.selectedFruit)

<input value="{{fruit.value}}" data-ng-model="model.selectedFruit" type="radio" name="fruit" > {{fruit.id}}

Check out this working plnkr example.

edited Apr 15, 2013 at 22:50

TheHippo

63.3k15 gold badges78 silver badges101 bronze badges

answered Apr 15, 2013 at 21:40

joakimbl

18.1k5 gold badges57 silver badges53 bronze badges

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

6 Comments

FluxEngine Over a year ago

@joakimbi In the scope of the model, why is selectedFruit set to 2?

joakimbl Over a year ago

I did it because in your question you had isSelected: true on "Pear". If you don't want to pre select an item you can just set $scope.model={};

FluxEngine Over a year ago

@joakimbi when is use $scope.model={}; the object that gets passed is {"selectedFruit"=>"2"} but what I really need passed is just "2"... any thoughts?

joakimbl Over a year ago

Could you show me how you send the data - do you use $http, a $resource or something else?

FluxEngine Over a year ago

@joakimbi through a fruits service, that uses $resource

|

Collectives™ on Stack Overflow

Passing radio value with angularjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related