Question

我有两个输入选项，通过ng-model链接，以便在两个地方始终显示相同的国家/地区。

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

每个国家/地区都有不同的运费，一旦选择了国家/地区，您还可以选择不同的运费选项（＆＃34;正常＆＃34;和＃34;表达＆＃34;使用单选按钮。我想要让它在切换国家时始终显示正常＆＃34;成本，我通过在每个输入选项中添加ng-click并添加ng-change以听取更改来实现：< / p>

<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

将ng-model与input[radio]一起使用，并在选择更改时设置它的值。

UPDATED JSFIDDLE

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.shippingType = 'normal';	// 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;
    };
});

＆＃13;

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

＆＃13;

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

＆＃13;

AngularJS - Ng-更改更新值但不切换单选按钮

1 个答案: