添加数据时，NG-重复不更新列表 [英] ng-repeat not updating the list when adding data
本文介绍了添加数据时，NG-重复不更新列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的问题是，NG-重复不会自动更新数据。当我preSS添加PIN在我的code，元素正确添加到数据库中。如果我重新加载页面的数据显示正确，但不作为的角度应该。
根据记录，更新和删除工作正常。
在此先感谢
这是我的app.js code：
VAR应用= angular.module（应用程序，[]）;app.controller（AppCtrl功能（$ HTTP）{
VAR应用=这一点;$ http.get（/ API /针）。成功（功能（数据）{
app.pins = data.objects;
}）app.addPin =功能（适用范围）{
$ http.post（/ API /针，{头衔：新，形象：http://placekitten.com/200/200/?image=+ app.pins.length}）
.success（功能（数据）{
add.pins.push（数据）;
}）
}app.deletePin =功能（销）{
$ http.delete（/ API /销/+ pin.id）.success（功能（响应）{
app.pins.splice（app.pins.indexOf（针），1）
}）
}app.updatePin =功能（销）{
$ http.put（/ API /销/+ pin.id，针）;
}}）
这是我的index.html文件：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;标题＆GT;引脚克隆LT; /标题＆GT;
＆所述; SCRIPT SRC =角/ angular.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =角/角resource.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =JS / app.js＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;机身NG-应用=应用程序NG控制器=AppCtrl为app＆GT;＆LT;按钮NG点击=app.addPin（）＆gt;添加管脚和LT; /按钮＆GT;
＆LT; DIV NG重复=销app.pins＆GT;
＆LT; IMG NG-SRC ={{pin.image}}ALT =/＆GT;
＆LT; DIV CLASS =UI＆GT;
＆LT;输入类型=文本NG模型=pin.title/＆GT;
＆LT;按钮NG点击=app.updatePin（PIN）＆GT;更新和LT; /按钮＆GT;
＆LT;按钮NG点击=app.deletePin（PIN）＆GT;删除＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
首先，你应该使用 $范围（文件）。你可以阅读更多有关
因此您的控制器是这样的。
app.controller（AppCtrl，[$范围，$ HTTP
功能（$范围，$ HTTP）{ $ http.get（/ API /针）。成功（功能（数据）{
$ scope.pins = data.objects;
}）; $ scope.addPin =功能（）{
....
}; $ scope.deletePin =功能（销）{
....
}; $ scope.updatePin =功能（销）{
....
};
}]）;
HTML
＆LT;机身NG-应用=应用程序NG控制器=AppCtrl＆GT; ＆LT;按钮NG点击=addPin（）＆gt;添加管脚和LT; /按钮＆GT;
＆LT; DIV NG重复=针针脚＆GT;
＆LT; IMG NG-SRC ={{pin.image}}ALT =/＆GT;
＆LT; DIV CLASS =UI＆GT;
＆LT;输入类型=文本NG模型=pin.title/＆GT;
＆LT;按钮NG点击=updatePin（PIN）＆GT;更新和LT; /按钮＆GT;
＆LT;按钮NG点击=deletePin（PIN）＆GT;删除＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;＆LT; /身体GT;
最后，来这里的核心部分。你应该叫 $适用（文件），当你的模型改变。你可以阅读更多这个博客帖子。
$ HTTP
。员额（/ API /针，{
标题：新，
图片：
http://placekitten.com/200/200/?image=
+ $ scope.pins.length
}）
.success（功能（数据）{
$范围。$应用（函数（）{
$ scope.pins.push（数据）;
}）;
}）;
因此，完整的控制器code：
app.controller（AppCtrl，[$范围，$ HTTP
功能（$范围，$ HTTP）{ $ http.get（/ API /针）。成功（功能（数据）{
$ scope.pins = data.objects;
}）; $ scope.addPin =功能（）{
$ HTTP
。员额（/ API /针，{
标题：新，
图片：
http://placekitten.com/200/200/?image=
+ $ scope.pins.length
}）
.success（功能（数据）{
$范围。$应用（函数（）{
$ scope.pins.push（数据）;
}）;
}）;
}; $ scope.deletePin =功能（销）{
$ HTTP
.delete（/ API /销/+ pin.id）
.success（功能（响应）{
$范围。$应用（函数（）{
$ scope.pins.splice（
$ scope.pins.indexOf（针），1
）;
}）;
}）;
}; $ scope.updatePin =功能（销）{
$ http.put（/ API /销/+ pin.id，针）;
};
}]）;
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-重复不更新列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
