如何用ng-repeat中的单选按钮绑定选择? AngularJS

时间:2014-08-27 07:15:54

标签: angularjs

如何用ng-repeat中的单选按钮绑定选择?

我可以从内部选择的选定单选按钮中获得税。

当用户选择城镇和价格时,必须相应地更改单选按钮。

帮助!

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

1 个答案:

答案 0 :(得分:2)

在你的剧本中:

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

你的选择(我不确定这里是否需要ng-model,但我让它留下来):

<option ng-repeat="tax in delivery.tax" ng-value="tax" ng-model="$parent.selectedTax" ng-click="TaxSelect(tax)">{{tax.town}} {{tax.price}} $</option>

您的展示:

Tax delivery: {{ selectedTax.town}}, {{ selectedTax.price}}

Fiddle DEMO