Как связать вложенный выбор 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];
}
  • Вопрос задан
  • 3627 просмотров
Решения вопроса 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 это легко организовывается, но хочется магии Ангуляра отведать.
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы