如何在更改无线电值时更改文本框的ng模型?

Question

我的文本框看起来像这样

<input type="number" ng-model="obj.celcius" min="0" max="100" >

我有两个单选按钮

<input type="radio" ng-model="obj.selection" value="celcius">
<input type="radio" ng-model="obj.selection" value="farheneit">

当用户单击farheneit单选按钮时，我希望文本框的ng-model更改为obj.farheneit。我怎样才能做到这一点？我还想更新文本框的最小值和最大值。

Answer 1

尝试使用obj[obj.selection]。

请参阅下面的代码片段。

angular.module("app", [])
.controller("myCtrl", function($scope) {
$scope.obj = {
selection: 'celcius',
celcius: 1,
farheneit: 2
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<input type="number" ng-model="obj[obj.selection]" min="0" max="100" >
<input type="radio" ng-model="obj.selection" value="celcius">
<input type="radio" ng-model="obj.selection" value="farheneit">

{{obj.selection}}
</div>

Answer 2

我在下面创建了代码片段。目前，我添加了摄氏和华氏的随机min和max值。

var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.tempdata = {
"celsius": {
"min": 0,
"max": 100,
"value": 37
},
"fahrenheit": {
"min": 50,
"max": 150,
"value": 120
}
}
$scope.upDateData = function(data, type) {
$scope.obj.temp = data;
if (type == 'celsius') {
$scope.min = $scope.tempdata.celsius.min;
$scope.max = $scope.tempdata.celsius.max;
} else if (type == 'fahrenheit') {
$scope.min = $scope.tempdata.fahrenheit.min;
$scope.max = $scope.tempdata.fahrenheit.max;
}
}
});

.text-data {
width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div ng-app="app" ng-controller="test">
Number:
<input type="number" class="text-data" ng-model="obj.temp" min="{{min}}" max="{{max}}">
<div>
Celsius:
<input type="radio" ng-model="obj.selection" ng-value="tempdata.celsius.value" ng-change="upDateData(obj.selection, 'celsius')"> Fahrenheit:
<input type="radio" ng-model="obj.selection" ng-value="tempdata.fahrenheit.value" ng-change="upDateData(obj.selection, 'fahrenheit')">
</div>
</div>