CODEWITHSUNDEEP
angularjs
Lara Ch
Lara Ch

Reputation: 165

AngularJS scope function isn't working with no console errors

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

enter image description here

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.

Upvotes: 0

Views: 74

Answers (1)

coding-dude.com
coding-dude.com

Reputation: 808

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

Upvotes: 1

Related Questions