How to binding select with radio buttons in ng-repeat?
I wona get tax from selected radio button in inner select.
When user picks town and price, radio button must be changed accordingly.
Help!
jsfiddle.net/hanze/pqh4eq96
html
<h1>Select </h1>
<div ng-app="" ng-controller="OrderCtrl">
<div class="radio" ng-repeat="delivery in deliveries">
<label>
<input type="radio" name="radioDelivery" ng-value="delivery" ng- model="$parent.selectedDelivery">
{{delivery.name}}. {{delivery.desc}}
<select>
<option ng-repeat="tax in delivery.tax" ng-value="tax" ng- model="$parent.selectedTax">{{tax.town}} {{tax.price}} $ </option>
</select>
</label>
</div>
<br>Delivery: {{selectedDelivery.name}}
<br>Tax delivery: {{ }} /// ??</div>
js
OrderCtrl = function ($scope) {
$scope.deliveries = [{
name: "RussianPOST",
tax: [{
town: "Moscow",
price: 10,
}, {
town: "Izhevsk",
price: 30,
}]
}, {
name: "DHL",
tax: [{
town: "Moscow",
price: 50,
}, {
town: "Izhevsk",
price: 100,
}]
}
];
$scope.selectedDelivery = $scope.deliveries[0];
}
In your script:
OrderCtrl = function ($scope) {
$scope.deliveries = [{
name: "RussianPOST",
tax: [{
town: "Moscow",
price: 10,
}, {
town: "Izhevsk",
price: 30,
}]
}, {
name: "DHL",
tax: [{
town: "Moscow",
price: 50,
}, {
town: "Izhevsk",
price: 100,
}]
}
];
$scope.selectedDelivery = $scope.deliveries[0];
$scope.TaxSelect=function(tax){
$scope.selectedTax = tax;
}
}
Your option (I am not sure if ng-model is needed here, but i am letting it stay):
<option ng-repeat="tax in delivery.tax" ng-value="tax" ng-model="$parent.selectedTax" ng-click="TaxSelect(tax)">{{tax.town}} {{tax.price}} $</option>
Your display:
Tax delivery: {{ selectedTax.town}}, {{ selectedTax.price}}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.