javascript - AngularJS ng-重复 : view doesn't update on model change…

Question

我正在尝试通过 ng-submit 将项目添加到我的 View 中。函数 getTemp 按预期工作，并且 $scope.temperatures 已正确更新(我可以在控制台中看到它)，但是新数据值不会出现在 View 中。我不确定什么没有被正确绑定(bind)。

我在这里查看了其他相关问题，但似乎没有一个是完全相同的。

查看:

<div ng-controller="tempCtrl" class="container">
        <form id="zipCodeForm"  ng-submit="submit()" ng-controller="tempCtrl">
            <input id="zipCodeInput" ng-model="text" name="text" type="text"> </input>
            <input id="zipSubmit" type="submit" value="Submit" class="btn btn-large btn-primary"></input>
        </form>

        <div>
            <h4 ng-repeat='item in temperatures'>
                Zip code is {{item.zip}} and temperature is {{item.temp}}
            </h4>
        </div>
    </div>  

型号:

var temperatureApp = angular.module('temperatureApp', []);

temperatureApp.controller('tempCtrl', function ($scope, $http) {
$scope.temperatures = [
                    {zip: "10003", temp: "43"},
                    {zip: "55364", temp: "19"}
];  

function getTemp(zipCode){
    $http({method: 'GET', url: 'http://weather.appfigures.com/weather/' + zipCode}).
    success(function(data){
        tempObject = data;
        $scope.temperatures.push({zip: "10003", temp: tempObject.temperature.toString()});
    });
}

$scope.submit = function() {
    getTemp(this.text);
    console.log($scope.temperatures);
}

})

Answer 1

问题是您的表单中有 ng-controller="tempCtrl"。这将创建其自己的当前作用域的子作用域。因此，您放入此范围的任何对象都不会影响当前范围。尝试删除它:

 <div ng-controller="tempCtrl" class="container">
     <form id="zipCodeForm" ng-submit="submit()"> //remove your redundant ng-controller
         <input id="zipCodeInput" ng-model="text" name="text" type="text"> </input>
         <input id="zipSubmit" type="submit" value="Submit" class="btn btn-large btn-primary"></input>                  
     </form>
     <div>
          <h4 ng-repeat='item in temperatures'>
              Zip code is {{item.zip}} and temperature is {{item.temp}}
          </h4>
     </div>
</div>

DEMO