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
}]

score 1 · Accepted Answer · answered Aug 23 '14 at 07:44

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 '14 at 07:44

Alborz

6,843
3
22
37

your JSFiddle does not work. I have updated yours to work as well. http://jsfiddle.net/alansouzati/j9x23apu/12/ – Alan Souza Aug 23 '14 at 07:47
Sorry i did not save my fiddle. please check again – Alborz Aug 23 '14 at 07:48
using $parent is not safe. use an object as your model. – Alborz Aug 23 '14 at 07:50
why $parent is not safe? – Alan Souza Aug 23 '14 at 07:51
It is common that you have nested scopes in your code. parent may not be the one that you expected . specially when you put your code in a directive. – Alborz Aug 23 '14 at 07:53
Well.. what if your directive has a "model" object as well? it would have the same problem, wouldn't it? – Alan Souza Aug 23 '14 at 07:55
1

this is kind of duplicate of http://stackoverflow.com/questions/14775981/angularjs-using-ng-repeat-to-create-sets-of-radio-inputs – Pankaj Parkar Aug 23 '14 at 08:00
It clear that for creating a directive some changes are required. For example your for loop may be in the directive with an isolated scope. then the $parent does not work. – Alborz Aug 23 '14 at 08:02

score 0 · Answer 2 · answered Aug 23 '14 at 07:43

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>

score 0 · Answer 3 · answered Aug 23 '14 at 07:50

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
}]
}

Why you don't put ng-value="{{item}}" and ng-model="$parent.something" inside your radio button input element? — Pankaj Parkar, Aug 23 '14 at 08:07
that's not better, that is the only way to do that, you are forcefully using event instead of doing it in simpler way — Pankaj Parkar, Aug 23 '14 at 08:35

How to get data from radio buttons? angularjs

3 Answers3