2017-05-05 2 views
0

私のテキストボックスは、私は2つのラジオボタン 無線値の変更時にテキストボックスのNGモデルを変更するにはどうすればよいですか? farheneitラジオボタンをユーザーがクリックすると、私はテキストボックスのNG-モデルはobj.farheneitに変更したい場合は

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

を持っているこの

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

のように見えます。どのように私はこれを達成することができますか?私はまた、テキストボックスの最小と最大を更新したいと思います。

+0

あなたは[この](http://plnkr.co/edit/PUfnCyVsb3dlrRhuIUnL?p=preview)のようなものを持つことができませんか? – tanmay

+0

残念ながら...私はapiにセルキウスとfarheneitを渡さなければなりません。それらのうちの1つはヌルで、もう1つは値を含みます。 –

+0

私は単純なUIのものを好むと思うのですが(やりたいことのように)、APIを呼び出す直前にオブジェクトの変更をしています..あなたが尋ねたことは難しいですか、それはもっとクリーナーです反対に.. – tanmay

答えて

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>

1

私は以下のスニペットを作成しました。当分の間私はのためにFahrenheitのためにランダムなminmaxの値を追加しました。

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>

関連する問題