AngularJS - Ng変更更新値ですが、ラジオボタンを切り替えません

Question

ng-modelを介してリンクされた2つの入力オプションは、常に同じ国を両方の場所に表示するために使用します。

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

各国が異なる送料を持ち、国が選択されると、あなたはまた、別の出荷オプションを選択することができます（「ノーマル」とラジオボタンで「表現」。私はそれを常に表示したいです」通常の」コスト国を切り替える、と私は入力オプションのそれぞれにNGクリックの追加や変更を聴くためにはNG-変更を加えることによってそれを作ったとき：

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

問題は、その中にあります国を変更すると、ビューに表示されるデータは正しいですが、ラジオボタンが間違ったオプションに設定されています。 これは私のコントローラロジックです：

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

あなたは、事前に作業フィドルにhere感謝を見ることができます！

Answer 1

input[radio]でng-modelを使用し、選択変更時にその値を設定します。

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>