AngularJS - Ng - Aktualisierungswert ändern, aber Optionsfeld nicht umschalten

Question

Ich habe zwei Eingabeoptionen, die über ng-model verknüpft sind, um immer das gleiche Land an beiden Orten anzuzeigen.

<select ng-model="selectedCountry" ng-options="country.name for country in countries"> 
<select ng-model="selectedCountry" ng-options="country.name for country in countries"> 

Jedes Land hat unterschiedlich Versandkosten hat, und sobald das Land Sie auch zwischen verschiedenen Versandoptionen („normal“ und „Express“ mit einer Radio-Button. Ich will es immer mache die Seite "können ausgewählt wählen normale“Kosten, wenn das Land wechselt, und ich habe es durch Zugabe eines ng Klick auf jeden der Eingabemöglichkeiten und das Hinzufügen eine ng-Änderung, um die Änderungen zu hören:

<select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeShipping()" ng-click="shippingPrice=selectedCountry.shipping.normal"> 

Das Problem ist, dass während Die in der Ansicht angezeigten Daten sind korrekt, wenn das Land gewechselt wird, aber das Optionsfeld ist immer noch auf die falsche Option eingestellt 0 Dies ist meine Controller-Logik:

var app = angular.module('myApp', []); 
app.controller('myCtrl', function($scope) { 
$scope.countries = [{ 
    "name": "Freedonia", 
    "shipping" : 
    { 
     "normal":30, 
     "express":70 
    } 
    },{ 
    "name": "Mordor", 
    "shipping" : 
    { 
     "normal":70, 
     "express":110 
    } 
    },{ 
    "name": "Oz", 
    "shipping" : 
    { 
     "normal":140, 
     "express":180 
    } 
    }]; 

    $scope.selectedCountry = $scope.countries[0]; 

$scope.changeShipping = function() {  
    return $scope.shippingPrice = $scope.selectedCountry.shipping.normal; 
}; 
}); 

Sie können eine Arbeits Geige here Vielen Dank im Voraus sehen!

Answer 1

Verwenden Sie das ng-Modell mit input[radio] und legen Sie den Wert für die Änderung fest.

UPDATED JSFIDDLE

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function ($scope) { 
 
    $scope.shippingType = 'normal'; \t // initial value for input[radio] 
 

 
    $scope.countries = [{ 
 
     "name": "Freedonia", 
 
     "shipping": { 
 
      "normal": 30, 
 
      "express": 70 
 
     } 
 
    }, { 
 
     "name": "Mordor", 
 
     "shipping": { 
 
      "normal": 70, 
 
      "express": 110 
 
     } 
 
    }, { 
 
     "name": "Oz", 
 
     "shipping": { 
 
      "normal": 140, 
 
      "express": 180 
 
     } 
 
    }]; 
 

 
    $scope.selectedCountry = $scope.countries[0]; 
 

 
    $scope.changeShipping = function() { 
 
     $scope.shippingType = 'normal'; // set back to normal on country change 
 
     return $scope.shippingPrice = $scope.selectedCountry.shipping.normal; 
 
    }; 
 
});

.summary{ 
 
    background-color:gray; 
 
    border:1px solid black; 
 
    font-family:Arial; 
 
    margin-bottom:52px; 
 
    color:white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-controller="myCtrl" ng-app="myApp"> 
 
    <div class="summary"> 
 
    Summary:<br> 
 
    Country:<select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeShipping()"> 
 
    </select><br> 
 
    Shipping Costs: 
 
    {{selectedCountry.shipping[shippingType]}} 
 
    </div> 
 
    <div> 
 
    <select ng-model="selectedCountry" ng-options="country.name for country in countries" ng-change="changeShipping()"> 
 
    </select> 
 
    </div> 
 
    
 
    Shipping costs: 
 
    <form> 
 
    <input type="radio" name="shippingOptions" value="normal" ng-model="shippingType"> 
 
    Normal {{selectedCountry.shipping.normal}}<br> 
 
    <input type="radio" name="shippingOptions" value="express" ng-model="shippingType"> 
 
    Express {{selectedCountry.shipping.express}}<br> 
 
    </form> 
 
</div>