ng-change仅在ng-repeat内部触发一次 - Angular

时间:2014-11-28 18:59:56

标签: javascript angularjs ng-repeat

我正在连接雅虎天气服务API并使用Angular制作了一个简单的天气应用程序。我还创建了一个F-C温度转换器,可以在ng-change()的帮助下触发。但是由于某些原因,这仅适用于初始化。 出于某种原因,我无法理解为什么ng-repeat只会在ng-repeat中触发一次。请参阅下面的代码。任何帮助将不胜感激。

***我应该提到当我放置一个"调试器"在我的函数调用,changedTemperatureTo中,它触发"调试器"当我从F-> C转换,但"调试器"第二轮甚至不会从C-> F触发。第二次,我的意思是我第一次从F-> C翻转单选按钮。当我将其翻转时,没有任何反应 - 调试器不会触发。

查看:

{{日期}}

<span ng-repeat="temp in temperatureNames">
  <input type="radio" name="selectedTemperatureNamed" ng-model="selectedTemperatureName" ng-value="temp" ng-change="changedTemperatureTo(temp)"/> {{temp}}
</span>

<select ng-model="sort">
  <option value="cityNameForForecast(td)">City</option>
  <option value="high">High</option>
  <option value="low">Low</option>
</select>
<input type="checkbox" ng-model="reverse"/> <small>*Check to Reverse Order</small>


<div ><br>
    <table class="tg">
        <thead>
           <tr >
                <th class="tg-031e"></th>
                <th class="tg-031e"></th>
                <th class="tg-031e"></th>
                <th class="tg-031e">High</th>
                <th class="tg-031e">Low</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="td in forecastAll | orderBy:sort:reverse">
                <th class="tg-031e"><a href="#/weather/city/{{cityNameForForecast(td)}}">{{cityNameForForecast(td)}}</a></th>
                <th class="tg-031e"><img src="http://l.yimg.com/a/i/us/we/52/{{ td.code }}.gif"></th>
                <th class="tg-031e">{{td.text}}</th>
                <th class="tg-031e">{{td.high}}</th>
                <th class="tg-031e">{{td.low}}</th>
            </tr>
        </tbody>
    </table>

</div>

控制器:

/ * global angular * /

var weatherControllers = (function () {
    var weatherControllers = angular.module('weatherControllers', []);

    // Declare the application controller and inject the scope reference.
    weatherControllers.controller('AppCtrl', ['$scope', function ($scope) {
        // Define the title model.
        $scope.title = "AngularJS Tutorial - Yahoo Weather App";
    }]);
    // Inject the scope and new weatherService reference into the controller.
    weatherControllers.controller('ListCtrl', ['$scope', 'weatherService', function ($scope, weatherService) {
      // Define the forecast data.  
    }]);

    // Inject the scope and new weatherService reference into the controller.
    weatherControllers.controller('WeatherCtrl', ['$scope', 'weatherService',
                                  function ($scope, weatherService) {
                                      // Define the forecast data.      
                                      // forcastOne >
                                      weatherService.getWeather('Vancouver').success(function (data) {
                                        $scope.forecastVan = weatherService.getForecastFromData(data);
                                        console.log("forecastVan");
                                        console.log($scope.forecastVan);
                                        // console.log($scope.forecastVan[0]);
                                        // console.log("$scope.forecastVan[0]['date']");
                                        // console.log($scope.forecastVan[0]['date']);
                                        $scope.forecastDate = $scope.forecastVan[0]['date'];

                                        weatherService.getWeather('Honolulu').success(function (data) {
                                          $scope.forecastHon = weatherService.getForecastFromData(data);
                                          console.log("forecastHon");
                                          console.log($scope.forecastHon);
                                          console.log($scope.forecastHon[0]);
                                          weatherService.getWeather('San Diego').success(function (data) {
                                            $scope.forecastSan = weatherService.getForecastFromData(data);
                                            console.log("forecastSan");
                                            console.log($scope.forecastSan);
                                            console.log($scope.forecastSan[0]);
                                            weatherService.getWeather('Havana Cuba').success(function (data) {
                                              $scope.forecastHav = weatherService.getForecastFromData(data);
                                              console.log("forecastHav");
                                              console.log($scope.forecastHav);
                                              console.log($scope.forecastHav[0]);
                                              // Create index model
                                              $scope.forecastAll = [$scope.forecastVan[0], $scope.forecastHon[0], $scope.forecastSan[0], $scope.forecastHav[0]]
                                            });
                                          });
                                        });
                                      });

                                      $scope.cityNameForForecast = function (forecast) {
                                        if ($scope.forecastVan[0] == forecast) {
                                          return 'Vancouver';
                                        }
                                        else if ($scope.forecastHon[0] == forecast) {
                                          return 'Honolulu';
                                        }
                                        else if ($scope.forecastSan[0] == forecast) {
                                          return 'San Diego';
                                        }
                                        else if ($scope.forecastHav[0] == forecast) {
                                          return 'Havana Cuba';
                                        }
                                      };


                                      // Temperature
                                      $scope.temperatureNames = ['C', 'F'];

                                      $scope.selectedTemperatureName = $scope.temperatureNames[1];

                                      $scope.changedTemperatureTo = function (temperatureName) {
                                          // debugger;
                                        if (temperatureName == 'C') {
                                          $scope.forecastAll = weatherService.arrayToCelsius($scope.forecastAll);
                                        }
                                        else if (temperatureName == 'F') {
                                          $scope.forecastAll;
                                        }
                                      };
                                  }]);
    // Inject scope, $routeParams, and cardService  
    weatherControllers.controller('DetailCtrl', ['$scope', '$routeParams', 'weatherService',
                                  function ($scope, $routeParams, weatherService) {
                                    weatherService.getWeather($scope, $routeParams.cityID);
                                    $scope.cityName = $routeParams.cityName;

                                    weatherService.getWeather($routeParams.cityName).success(function (data) {
                                      $scope.forecast = weatherService.getForecastFromData(data);
                                    });
                                    $scope.temperatureNames = ['C', 'F'];
                                    $scope.selectedTemperatureName = $scope.temperatureNames[1];

                                  }]);

    return weatherControllers;
}());

SERVICES:

weatherApp.factory("weatherService", function ($http) {
    'use strict';
    return {
        doSomething: function ($scope) {
        },
        getWeather: function (city) {
            var url = this.getUrlForCity(city);
            return $http.get(url);
        },
        getUrlForCity: function (city) {
            // Weather codes:
            var weatherCodes = {'Vancouver': 'CAXX0518', 'Honolulu': 'USHI0026', 'San Diego': 'USCA0982', 'Havana Cuba': 'CUXX0003'}

            var city     = weatherCodes[city] // Now on can call all cities at once
            var yahooAPI = "'http://weather.yahooapis.com/forecastrss?p=";
            var format   = "'&format=json&diagnostics=true&callback=";
            var yql      = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20rss%20where%20url%3D";
            var url      = yql + yahooAPI+ city + format;
            return url;
        },

        getForecastFromData: function (data) {
            try {

                var stringified = JSON.stringify(data);          // Convert to a string.
                stringified = stringified.split("\\n").join(""); // Remove new line '/n'.
                var listing = JSON.parse(stringified);           // Convert to object.
                var forecast = [];                               // Store 5 day forecast.
                var forecastDate = [];                           // Stores forecast date
                for (var result in listing) {
                    for (var item in listing[result].results) {
                        for (var day in listing[result].results.item.forecast) {
                            forecast.push(listing[result].results.item.forecast[day]);
                        }
                    }
                }
            }
            catch (error) {
                alert("Weather reading error:" + error.name + ": "
                    + error.message);
            }
            return forecast;
        },

        arrayToCelsius: function (forecastArray) {
            for (var i = 0; i < forecastArray.length; i++) {
                forecastArray[i]['high'] = this.getCelsius(forecastArray[i]['high']);
                forecastArray[i]['low'] = this.getCelsius(forecastArray[i]['low']);
            }

            return forecastArray;
        },

        getCelsius: function (fahrenheit) {
            var fTempVal = this.getForecastFromData(fahrenheit);
              // debugger;
            // $scope.celsius = this.getForecastFromData;
            var celsius = ((fahrenheit - 32) * 0.56).toFixed(0);
            return celsius; // Calculation goes here.
        }
    }
});

1 个答案:

答案 0 :(得分:1)

从我所看到的,你最初将温度设定为华氏温度。

// Temperature
$scope.temperatureNames = ['C', 'F'];
$scope.selectedTemperatureName = $scope.temperatureNames[1]; 

问题出现在这里:

$scope.changedTemperatureTo = function(temperatureName) {
  // debugger;
  if (temperatureName == 'C') {
    $scope.forecastAll = weatherService.arrayToCelsius($scope.forecastAll);
  } else if (temperatureName == 'F') {
    /*
      You aren't doing anything to the forcastAll variable when the temperature
      is F
    */
    $scope.forecastAll;
  }
};

temperatureName == 'F'时没有发生任何事情。所以它会从Farenheight转换为Celcius,但回来时没有任何反应。

希望这有帮助!