简体   繁体   中英

How to binding select with radio buttons in ng-repeat? AngularJS

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

Fiddle DEMO

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM