我是AngularJS的新手,但我有一个小问题。我有一个要计算平均温度的城市列表,由于某种原因,在编辑了城市列表中的温度值后,计算平均温度的函数返回了不正确的值。加载页面后,它返回正确的值,但是在编辑温度值后,我得到了错误的结果。

这是我的代码:

<html ng-app>
<head>
    <title>Weather Comparison</title>
</head>
<body ng-controller='WeatherController'>
<h1>Weather Comparison</h1>
<div ng-repeat='item in items'>
    <span>{{item.city}}</span>
    <input ng-model='item.temp'>
    <input ng-model='item.humidity'>
    <input ng-model='item.wind'>
    <input ng-model='item.cloudiness'>
</div>
<div>The average temperature is {{avgTemp}}</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>
    function WeatherController($scope) {
    $scope.items = [
        {city: 'Phoenix,AZ', temp: 38, humidity: 10, wind: 3, cloudiness: 10},
        {city: 'Atlanta,GA', temp: 30, humidity: 80, wind: 7, cloudiness: 40},
        {city: 'Honolulu,HI', temp: 32, humidity: 75, wind: 8, cloudiness: 30}
    ];

    //returns incorrect average values after editing default temperature values
    $scope.$watch(function() {
        var sum = 0;
        for (var i = 0; i < $scope.items.length; i++) {
            sum += $scope.items[i].temp;
        }
        $scope.avgTemp = sum / $scope.items.length;
   });
}

</script>
</body>
</html>


有人知道我在这里做错什么吗?

最佳答案

温度是一个字符串,您需要将其转换为整数(DEMO):

sum += parseInt($scope.items[i].temp, 10);


或者,如果您想使用浮点数:

sum += parseFloat($scope.items[i].temp);

10-06 07:48