AngularJS scope function isn't working with no console errors

Question

I have this app that get some data about weather in specific region:

And I want to change the current temperature from Celsius to Fahrenheit by just clicking on the the C/F buttons. I tried the following script:

In app.JS and inside the controller of the current page:

$scope.convertToFahrenheit = function(degF)
{
    return Math.round(1.8*(degF - 273) +32);
}

Now in the html page I did the following:

Degree: 
<button ng-click="convertToCelsius(w.temp.day)" class="btn btn-info">
  C
</button> | 
<button ng-click="convertToFahrenheit(w.temp.day)" class="btn btn-info">
  F
</button>

This is the all app.JS script:

// MODULE
var weatherApp = angular.module('weatherApp', ['ngRoute', 'ngResource']);

// ROUTES
weatherApp.config(function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/home.htm',
        controller: 'homeController'
    })

    .when('/forecast', {
        templateUrl: 'pages/forecast.htm',
        controller: 'forecastController'
    })

    .when('/forecast/:days', {
        templateUrl: 'pages/forecast.htm',
        controller: 'forecastController'
    })

});

//Services

weatherApp.service('cityService', function()
{
    this.city = 'Rayak, ZA';
});
// CONTROLLERS
weatherApp.controller('homeController', ['$scope', 'cityService', function($scope, cityService) {

    $scope.city = cityService.city;

    //We are going to watch if the city text box is changed and updated the service
    $scope.$watch('city', function()
    {
        cityService.city = $scope.city;
    });

}]);

weatherApp.controller('forecastController', ['$scope', '$resource', '$routeParams', 'cityService', '$log', function($scope, $resource, $routeParams, cityService, $log) {

    $scope.city = cityService.city;

    $scope.weatherApi = $resource("http://api.openweathermap.org/data/2.5/forecast/daily?APPID=fcbc7173d3b696941002572f3f807129",
        {callback: "JSON_CALLBACK"}, {get:{method: "JSONP"}});

    $scope.days = $routeParams.days || 2;

    $scope.weatherResult = $scope.weatherApi.get({q: $scope.city, cnt: $scope.days})
    $log.log($scope.weatherResult);

    $scope.convertToCelsius = function(degC)
    {
        return Math.round(degC - 273.15);
    }

    $scope.convertToFahrenheit = function(degF)
    {
        return Math.round(1.8*(degF - 273) +32);
    }

    $scope.convertToDate = function(toDate)
    {
        return new Date(toDate*1000);
    }
}]);

And here is the forecast.htm script:

<label class="label label-info">Forecast for {{ city }} </label>
<hr/>
Days: <a href="#/forecast/2">2</a> | <a href="#/forecast/5">5</a> | <a href="#/forecast/10">10</a>
Degree: <button ng-click="convertToCelsius(w.temp.day)" class="btn btn-info">C</button> | <button ng-click="convertToFahrenheit(w.temp.day)" class="btn btn-info">F</button>
<div ng-repeat="w in weatherResult.list">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">{{ convertToDate(w.dt) | date: 'MMM, d, y' }}</h3>
                </div>
                <div class="panel-body">
                    <div class="col-sm-3">
                        {{w.temp.weather.icon}}
                    </div>
                    <hr/>
                    Daytime temperature {{convertToCelsius(w.temp.day)}}
                </div>
            </div>
        </div>
    </div>
</div>

The convertToCelsius() is working properly, and I tried to get the convertToFahrenheit() function inside the ng-repeat because the w is inside of it, but still no changes.

create a plunker to reproduce the problem

Sajeetharan
– Sajeetharan

2016-08-27 06:26:10 +00:00
Commented Aug 27, 2016 at 6:26 — Sajeetharan
– Sajeetharan, Commented Aug 27, 2016 at 6:26

coding-dude.com · Accepted Answer · 2016-08-27 06:38:13Z

1

You have to store in the scope what kind of values to display and then use convertToCelsius or convertToFahrenheit according to that variable. So in your app.js, in forecastController add the following line

$scope.display = 'C';

Then change your buttons like this

<button ng-click="display = 'C'" class="btn btn-info">C</button> | <button ng-click="display = 'F'" class="btn btn-info">F</button>

And display the temp like this

Daytime temperature {{display == 'C'?convertToCelsius(w.temp.day):convertToFahrenheit(w.temp.day)}}

The display variable will decide if the temp will display as Celsius or Fahrenheit

hope this helps, John

answered Aug 27, 2016 at 6:38

coding-dude.com

8081 gold badge10 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS scope function isn't working with no console errors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related