[英]AngularJS ng-repeat: view doesn't update on model change…
我正在尝试通过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);
}
})
问题是您的表单中有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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.