How to get data from radio buttons? angularjs

Question

i wona get price and name of chosen radio buttons. its easy with simple html tags. But I stacked when i trying generate radio buttons via angularjs from array (items)

Help!

http://jsfiddle.net/hanze/j9x23apu/

html

<h1>Select </h1>

<div ng-app="" ng-controller="OrderCtrl">
      <div ng-repeat="item in items">
<div class="radio">
<label>
     <input type="radio" name="item" ng-model="item" ng-checked="{{item.checked}}"> 
     {{item.name}} +{{item.price}} $.</label>
</div>
</div>

Your choice: {{}} **what i must write here?**
<br>
Price: {{}} **and here?**
</div>

js

 OrderCtrl = function ($scope) {
$scope.items = [{
name: 'None',
value: "no",
price: 0,
checked: true
}, {
name: 'Black',
value: "black",
price: 99,
checked: false
}, {
name: 'White',
value: "white",
price: 99,
checked: false
}, {
name: 'Barhat',
value: "barhat",
price: 49,
checked: false
}, {
name: 'Barhat',
value: "cream",
price: 49,
checked: false
}]

Alborz · Accepted Answer · 2014-08-23 07:44:41Z

1

You can look at the angularjs documentaion about radio buttons here. You don't need to use ng-checked here. Use ng-value to set the value when redio is selected. I changed your jsfiddle post.

answered Aug 23, 2014 at 7:44

Alborz

6,9333 gold badges26 silver badges37 bronze badges

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

8 Comments

Alan Souza Over a year ago

your JSFiddle does not work. I have updated yours to work as well. jsfiddle.net/alansouzati/j9x23apu/12

Alborz Over a year ago

Sorry i did not save my fiddle. please check again

Alborz Over a year ago

using $parent is not safe. use an object as your model.

Alan Souza Over a year ago

why $parent is not safe?

Pankaj Parkar Over a year ago

this is kind of duplicate of stackoverflow.com/questions/14775981/…

|

Alan Souza · Accepted Answer · 2014-08-23 07:43:09Z

0

Your are missing the closing tag for your input. And when you have ng-repeat you have a seperate scope. In this case you need $parent.selectedItem to hold your selected elements.

I have updated the JSFiddle with a working state solution.

<div ng-app="" ng-controller="OrderCtrl">
<div ng-repeat="item in items" style="text-indent: 30px">
     <input type="radio" name="itemRadio"  ng-model="$parent.selectedItem" ng-value="item.name"/>
    {{item.name + '-' + item.price}}$.
</div>
    Your choice: {{selectedItem}}
</div>

answered Aug 23, 2014 at 7:43

Alan Souza

7,80510 gold badges51 silver badges72 bronze badges

Comments

worldask · Accepted Answer · 2014-08-23 07:50:39Z

0

jsFiddle: http://jsfiddle.net/j9x23apu/16/

html

<div ng-app="" ng-controller="OrderCtrl">
    <div ng-repeat="item in items" style="text-indent: 30px">
        <label>
            <input type="radio" name="item" ng-checked="{{item.checked}}" ng-click="change_item($event)" item-name="{{item.name}}" item-price="{{item.price}}" /> {{item.name}} + {{item.price}} 
        </label>
    </div>

    Your choice: {{selectedName}}
    <br />
    Price: {{selectedPrice}}
</div>

js

OrderCtrl = function ($scope) {
$scope.change_item = function(e) {
    $scope.selectedName = e.target.attributes['item-name'].value;
    $scope.selectedPrice = e.target.attributes['item-price'].value;
};

$scope.items = [{
    name: 'None',
    value: "no",
    price: 0,
    checked: true
}, {
    name: 'Black',
    value: "black",
    price: 99,
    checked: false
}, {
    name: 'White',
    value: "white",
    price: 99,
    checked: false
}, {
    name: 'Barhat',
    value: "barhat",
    price: 49,
    checked: false
}, {
    name: 'Barhat',
    value: "cream",
    price: 49,
    checked: false
}]
}

answered Aug 23, 2014 at 7:50

worldask

1,8373 gold badges22 silver badges38 bronze badges

2 Comments

Pankaj Parkar Over a year ago

Why you don't put ng-value="{{item}}" and ng-model="$parent.something" inside your radio button input element?

Pankaj Parkar Over a year ago

that's not better, that is the only way to do that, you are forcefully using event instead of doing it in simpler way

Collectives™ on Stack Overflow

How to get data from radio buttons? angularjs

3 Answers 3

8 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related