CODEWITHSUNDEEP
angularjs
juria_roberts
juria_roberts

Reputation: 155

How to change ng-model of a textbox on change of a radio value?

My textbox looks like this

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

I have two radio buttons

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

When the user clicks on the farheneit radio button I want the ng-model of the textbox to change to obj.farheneit. How can I acheive this? I would also like to update min and max of the textbox.

Upvotes: 0

Views: 375

Answers (2)

Shashank
Shashank

Reputation: 2060

I have created the snippet below. For time being I have added random min and max values for Celsius and Fahrenheit.

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>

Upvotes: 1

Pengyy
Pengyy

Reputation: 38189

try with obj[obj.selection].

refer below code snippet.

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>

Upvotes: 1

Related Questions