AngularJS作用域函数无法正常工作且没有控制台错误

Question

我有这个应用程序，它可以获取有关特定地区天气的一些数据：

我想通过单击C / F按钮将当前温度从摄氏温度更改为华氏温度。 我尝试了以下脚本：

在app.JS中以及当前页面的控制器中：

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

现在，在html页面中，我执行了以下操作：

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>

这是所有app.JS脚本：

// 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);
    }
}]);

这是Forecast.htm脚本：

<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>

convertToCelsius（）正常工作，我尝试在ng-repeat获取convertToFahrenheit（）函数，因为w在其中，但仍然没有变化。

Answer 1

您必须在范围中存储要显示的值类型，然后根据该变量使用convertToCelsius或convertToFahrenheit。 因此，在您的app.js中，在ForecastController中添加以下行

$scope.display = 'C';

然后像这样改变你的按钮

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

并像这样显示温度

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

显示变量将决定温度将显示为摄氏度还是华氏度

希望这会有所帮助，约翰