CODEWITHSUNDEEP
htmlangularjsvalueconverter
Manojkanth
Manojkanth

Reputation: 1169

How to convert yard value to meter value in angularjs

Here am Trying to convert the meter value to yard. I have two dropdowns. First dropdown has some values. And the 2nd dropdown has two values "meter" & "yard", Now the question is If the meter selected from the 2nd dropdown, The values in the first dropdown want to remain same. But, If "Yard" selected the entire values from the first dropdown needs to be convert into Yard values. I found the logic but i dont know how implement it into angular controller. Here am created a plunkr https://plnkr.co/edit/Q4lxXf6YRrdAV2kUNAln?p=preview

HTML

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
   <div ng-app="app" ng-controller="ctrl">

 <select class="form-control" ng-model="distancetypeId" ng-options="Distance.id as Distance.value for Distance in data"></select>
<select class="form-control" ng-model="ConverttypeId" ng-options="Convert.id as Convert.type for Convert in convertor" ng-change="convertToMeter()"></select>

</div>
  </body>

</html>

AngularJS

angular.module("app",[])
.controller("ctrl",function($scope){


    $scope.data = [{
    "id": 1,
    "value": 254
  },
  {
    "id": 2,
    "value": 100
  },
  {
    "id": 3,
    "value":250 
  },
  {
    "id": 4,
    "value":10 
  }]

    $scope.convertor = [{
    "id": 1,
    "type": "Meter"
  },
  {
    "id": 2,
    "type": "Yard"
  }];



 $scope.convertToMeter=function(ConverttypeId){
           if(ConverttypeId = 2){

    //this is logic that i want to do  (dropdown1values=value*1.0936;)

 }}

 });

Upvotes: 0

Views: 186

Answers (2)

JeanJacques
JeanJacques

Reputation: 1754

So if Yard is selected then you need to multiply the distance value by 1.0936 so you can directly do this in the ngOptions like this :

ng-options="Distance.id as (Distance.value * (1 + (ConverttypeId == '2') * 0.0936)) for Distance in data"

So if Converttypeid equals to '2' (which means that Yard option is selected) then the distance is multiplyed by 1 + (true * 0.0936) which equals to 1.0936.

If not the distance is multiplyed by 1 + (false * 0.0936) which equals to 1, so it's still the same value.

Here is a plunker to show this

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41397

you can modify the ng-change function like this 

 $scope.convertToMeter=function( ){
    if($scope.ConverttypeId == 2){
    // document.getElementById("outputMeters").innerHTML=value/1.0936;
      for(var i=0; i<=$scope.data.length-1; i++){
        $scope.data[i].value =( $scope.data[i].value/ 0.9144 ).toFixed(2)
      }
    }else if($scope.ConverttypeId == 1){
      for(var i=0; i<=$scope.data.length-1; i++){
        $scope.data[i].value = parseInt($scope.data[i].value * 0.9144) 
      }
    }

 }

Demo

Upvotes: 1

Related Questions