添加数据时ng-repeat不更新列表
[英] ng-repeat not updating the list when adding data
本文介绍了添加数据时ng-repeat不更新列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题是 ng-repeat 没有自动更新数据.当我在代码中按下 add pin 时，元素会正确添加到数据库中.如果我重新加载页面，数据会正确显示，但不会像 Angular 那样显示.作为记录，更新和删除工作正常.
提前致谢
这是我的 app.js 代码:
var app = angular.module("app", []);app.controller("AppCtrl", function ($http) {var app = this;$http.get("/api/pin").success(function (data) {app.pins = data.objects;})app.addPin = 函数(作用域){$http.post("/api/pin", {"title":"new", "image":"http://placekitten.com/200/200/?image=" + app.pins.length}).成功(功能(数据){add.pins.push(data);})}app.deletePin = 功能(引脚){$http.delete("/api/pin/" + pin.id).success(function(response) {app.pins.splice(app.pins.indexOf(pin), 1)})}app.updatePin = 函数(引脚){$http.put("/api/pin/" + pin.id, pin);}})
这是我的 index.html 文件:
<头><title>Pin Clone</title><script src="angular/angular.js"></script><script src="angular/angular-resource.js"></script><script src="js/app.js"></script><body ng-app="app" ng-controller="AppCtrl as app"><button ng-click="app.addPin()">添加 Pin</button><div ng-repeat="pin in app.pins"><img ng-src="{{ pin.image }}" alt=""/><div class="ui"><input type="text" ng-model="pin.title"/><button ng-click="app.updatePin(pin)">更新</button><button ng-click="app.deletePin(pin)">删除</button>
</html>
解决方案
首先，你应该真正使用 $scope (Doc) 在您的控制器中.您可以在这篇博文中阅读有关差异的更多信息.
因此你的控制器看起来像这样.
app.controller("AppCtrl", ["$scope", "$http",函数($scope，$http){$http.get("/api/pin").success(function (data) {$scope.pins = data.objects;});$scope.addPin = 函数 () {....};$scope.deletePin = 函数(引脚){....};$scope.updatePin = 函数(引脚){....};}]);
HTML:
<button ng-click="addPin()">添加 Pin</button><div ng-repeat="pin in pin"><img ng-src="{{ pin.image }}" alt=""/><div class="ui"><input type="text" ng-model="pin.title"/><button ng-click="updatePin(pin)">更新</button><button ng-click="deletePin(pin)">删除</button>
最后，这里是核心部分.你应该调用 $apply (Doc) 当您的模型发生变化时.您可以在这篇博文中阅读更多内容.
$http.post("/api/pin", {标题:新"，图片:"http://placekitten.com/200/200/?image="+ $scope.pins.length}).成功(功能(数据){$scope.$apply(function() {$scope.pins.push(data);});});
因此，完整的控制器代码:
app.controller("AppCtrl", ["$scope", "$http",函数($scope，$http){$http.get("/api/pin").success(function (data) {$scope.pins = data.objects;});$scope.addPin = 函数 () {$http.post("/api/pin", {标题:新"，图片:"http://placekitten.com/200/200/?image="+ $scope.pins.length}).成功(功能(数据){$scope.$apply(function() {$scope.pins.push(data);});});};$scope.deletePin = 函数(引脚){$http.delete("/api/pin/" + pin.id).成功(功能(响应){$scope.$apply(function() {$scope.pins.splice($scope.pins.indexOf(pin), 1);});});};$scope.updatePin = 函数(引脚){$http.put("/api/pin/" + pin.id, pin);};}]);
my problem is that the ng-repeat is not updating automatically the data. When I press add pin in my code, the element is added correctly to the database. If I reload the page the data appear correctly, but not as angular should.
For the record, the Update and delete are working correctly.
Thanks in advance
This is my app.js code:
var app = angular.module("app", []);
app.controller("AppCtrl", function ($http) {
var app = this;
$http.get("/api/pin").success(function (data) {
app.pins = data.objects;
})
app.addPin = function (scope) {
$http.post("/api/pin", {"title":"new", "image":"http://placekitten.com/200/200/?image=" + app.pins.length})
.success(function(data) {
add.pins.push(data);
})
}
app.deletePin = function (pin) {
$http.delete("/api/pin/" + pin.id).success(function(response) {
app.pins.splice(app.pins.indexOf(pin), 1)
})
}
app.updatePin = function (pin) {
$http.put("/api/pin/" + pin.id, pin);
}
})
This is my index.html file:
<html>
<head>
<title>Pin Clone</title>
<script src="angular/angular.js"></script>
<script src="angular/angular-resource.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="app.addPin()">Add Pin</button>
<div ng-repeat="pin in app.pins">
<img ng-src="{{ pin.image }}" alt=""/>
<div class="ui">
<input type="text" ng-model="pin.title"/>
<button ng-click="app.updatePin(pin)">Update</button>
<button ng-click="app.deletePin(pin)">Delete</button>
</div>
</div>
</body>
</html>
解决方案
First of all, you should really use $scope (Doc) in your controller. You can read more about the differences in this post.
Thus your controller would look like this.
app.controller("AppCtrl", ["$scope", "$http",
function ($scope, $http) {
$http.get("/api/pin").success(function (data) {
$scope.pins = data.objects;
});
$scope.addPin = function () {
....
};
$scope.deletePin = function (pin) {
....
};
$scope.updatePin = function (pin) {
....
};
}]);
HTML:
<body ng-app="app" ng-controller="AppCtrl">
<button ng-click="addPin()">Add Pin</button>
<div ng-repeat="pin in pins">
<img ng-src="{{ pin.image }}" alt=""/>
<div class="ui">
<input type="text" ng-model="pin.title"/>
<button ng-click="updatePin(pin)">Update</button>
<button ng-click="deletePin(pin)">Delete</button>
</div>
</div>
</body>
Finally, here comes the core part. You should call $apply (Doc) when your models change. You can read more in this blog post.
$http
.post("/api/pin", {
title: "new",
image:
"http://placekitten.com/200/200/?image="
+ $scope.pins.length
})
.success(function(data) {
$scope.$apply(function() {
$scope.pins.push(data);
});
});
Thus, the full controller code:
app.controller("AppCtrl", ["$scope", "$http",
function ($scope, $http) {
$http.get("/api/pin").success(function (data) {
$scope.pins = data.objects;
});
$scope.addPin = function () {
$http
.post("/api/pin", {
title: "new",
image:
"http://placekitten.com/200/200/?image="
+ $scope.pins.length
})
.success(function(data) {
$scope.$apply(function() {
$scope.pins.push(data);
});
});
};
$scope.deletePin = function (pin) {
$http
.delete("/api/pin/" + pin.id)
.success(function(response) {
$scope.$apply(function() {
$scope.pins.splice(
$scope.pins.indexOf(pin), 1
);
});
});
};
$scope.updatePin = function (pin) {
$http.put("/api/pin/" + pin.id, pin);
};
}]);
这篇关于添加数据时ng-repeat不更新列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
