I wrote a little app that converts Fahrenheit to Celsius and I want a picture to display based on the Fahrenheit temperature. I can't get the picture to display. Can someone tell me where I'm going wrong? Many thanks.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fahrenheit to Celsius</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script src="app/lib/angular.min.js"></script>
<script src="app/app.js"></script>
<script src="app/fahrenConvService.js"></script>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<table>
<tr>
<td>Fahrenheit</td>
<td><input type="number" ng-model="input" /></td>
</tr>
<tr>
<td>Celsius</td>
<td><input type="text" ng-model="output" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" ng-click="transformFahrenheit(input)" value="Convert to Celsius" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" ng-click="clearInputOutput()" value="Clear" /></td>
</tr>
<tr>
<td></td>
<td><img ng-src="{{image}}" /></td>
</tr>
</table>
</div>
</body>
</html>
JS
var app = angular.module("myModule", [])
.controller('myController', function ($scope, fahrenConvService) {
$scope.transformFahrenheit = function (input) {
$scope.output = fahrenConvService.processFahrenNumber (input);
$scope.image = imageService.whichImage (input);
}
$scope.clearInputOutput = function () {
$scope.output = "";
$scope.input = "";
}
});
app.factory('fahrenConvService', function () {
return {
processFahrenNumber: function (input) {
if (!input) {
return input;
}
var output = "";
output = Math.round((input - 32) * (5/9));
return output;
}
};
});
app.factory('imageService', function () {
return {
whichImage: function (input) {
if (input < 50) {
$scope.image = [{src: 'images/snow.jpg'}];
} else {
$scope.image = [{src: 'images/sunset.jpg'}];
}
}
};
});
You can't inject $scope inside factory. You need to get rid of $scope from factory & do return image path from whichImage method
app.factory('imageService', function () {
return {
whichImage: function (input) {
if (input < 50) {
return {src: 'images/snow.jpg'};
} else {
return {src: 'images/sunset.jpg'};
}
}
};
});
And then change your td to get image via accessing image.src
<td><img ng-src="{{image.src}}" /></td>