Menu
I am new to Angular JS and I am trying to create a set of radio buttons. Creating the buttons was the easy part, but I am having problems figuring out how to default select one of them without breaking everything. I have read about using ngChecked in the Angular docs and on multiple other stackoverflow questions but still can't quite seem to figure it out.
What I need to do is have one of the descriptions preselected when the user comes to the page. The price, discount, and deal_value also need to be shown with the values from the preselected price_option object.
Here is the code that I am trying to get to work: http://jsfiddle.net/qWzTb/311/
HTML Code:
<body ng-app="demoApp">
<div ng-controller="DemoController" ng-init="init([{qty: 1, price:10, qty_description:'descrip 1', discount:'1%', deal_value:200}, {qty: 2, price:7, qty_description:'descrip 2', discount:'5%', deal_value:100}])">
<div>
<label ng-repeat="price_option in price_options">
<input type="radio" ng-model="init.price_option" ng-value="price_option" ng-checked="selected_price_option" name="quantity"/>
{{ price_option.qty_description }}
</label>
<ul>
<li>{{ init.price_option.price }}</li>
<li>{{ init.price_option.discount }}</li>
<li>{{ init.price_option.deal_value }}</li>
</ul>
</div>
</div>
</body>
Javascript:
angular.module('demoApp', []).controller('DemoController', function($scope) {
$scope.init = function(prices) {
$scope.price_options = prices;
$scope.selected_price_option = $scope.price_options[0];
};
});
634
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
Always Offer a Default SelectionIn case of radio buttons this means that radio buttons should always have exactly one option pre-selected. Select the safest and most secure option (to prevent data loss).
To set the default checked value of a radio button in React: Store the radio button value in the state. Initialize the state to the value of the default checked radio button. Set the checked property on each radio button conditionally, e.g. checked={selected === 'yes'} .
Returns true if the radio button is checked by default, otherwise it returns false.
HTML
<body ng-app="demoApp">
<!-- ng-init functionality belongs in controller -->
<div ng-controller="DemoController">
<!-- move ng-repeat to container div instead of label -->
<div ng-repeat="price_option in price_options">
<label>
<!-- the model is the scope variable holding the selected value -->
<!-- the value is the value of this particular option -->
<input type="radio" ng-model="$parent.selected_price_option" ng-value="price_option" name="quantity" />{{price_option.qty_description}}</label>
<ul>
<li ng-bind="price_option.price"></li>
<li ng-bind="price_option.discount"></li>
<li ng-bind="price_option.deal_value"></li>
</ul>
</div>
</div>
</body>
JS
angular.module('demoApp', []).
controller('DemoController', function ($scope) {
//moved init logic to controler
$scope.price_options = [{
qty: 1,
price: 10,
qty_description: 'descrip 1',
discount: '1%',
deal_value: 200
}, {
qty: 2,
price: 7,
qty_description: 'descrip 2',
discount: '5%',
deal_value: 100
}];
$scope.selected_price_option = $scope.price_options[1];
});
Forked fiddle: http://jsfiddle.net/W8KH7/2/
Or you can use the object strategy to avoid having to reference $parent: http://jsfiddle.net/W8KH7/3/
192
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
