How to convert yard value to meter value in angularjs
Question
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="angular.js@1.6.2" 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;)
}}
});
2 answers
solution1
1 ACCPTED 2017-06-15 11:55:47
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
solution2
1 2017-06-15 12:02:55
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)
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.