Как связать вложенный выбор radio buttons -> select в AngularJS?

Продолжаем курить AngularJS.

Требуется вытащить значение select, которое вложено в radiobuttons.

Код 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];
}
  • Вопрос задан
  • 3620 просмотров
Решения вопроса 1
kompi
@kompi
nullstack devoops
Специально же разработали для select ng-options, там как раз нормальный пример есть.

Копипаст из одного действующего проекта (заранее извиняюсь за некрасивый код, одно из первых внедрений angularjs):
<tr ng-repeat="extraPoint in order.pickpoint" ng-show="form.address.city.name==extraPoint[0].name" class="delivery-section-extra">
    <td class="delivery-checkbox pickup-checkbox">
        <input ng-click="setPickup(extraPoint[0])"
            ng-checked="form.delivery.name==extraPoint[0].name"
            type="radio"
            ng-required="!giftOnly" />
    </td>
    <td ng-init="point=extraPoint[0]">
       <span ng-click="setPickup(point)">{{extraPoint[0].name}} - бесплатный самовывоз</span>
       <select
           ng-click="setPickup(point)"
           ng-model="point"
           ng-options="pickupPoint.desc for pickupPoint in extraPoint">
       </select>
   </td>
</tr>

Вкратце, есть список городов и у каждого из них есть select с точками самовывоза.
Данные попадают в модель по клику на radio кнопку/по клику по названию/по клику на select
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
hrhr99
@hrhr99 Автор вопроса
Там в примере нет связи radio и select. Интересует как реализовать, когда пользователь будет щелкать по селектам, чтобы и радио менялось соответственно.

То есть когда я выбираю стоимость и город DHL, то эта служба автоматически выбиралась.

На Jquery это легко организовывается, но хочется магии Ангуляра отведать.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы