AngularJS ng-repeat: просмотр не обновляется при изменении модели ...

Question

Я пытаюсь добавить элементы к моему представлению через ng-submit. Функция getTemp работает так, как ожидалось, и переменные $ scope.temperatures должным образом обновляются (я вижу это в консоли), однако новые значения данных не отображаются в представлении. Я не уверен, что не связано должным образом.

Я рассмотрел другие связанные вопросы здесь, но ни один из них не кажется совершенно таким же.

ВИД:

<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