Question

我的问题是ng-repeat没有自动更新数据。当我在我的代码中按add pin时，该元素被正确添加到数据库中。如果我重新加载页面，数据会正确显示，但不应该是有角度的。对于记录，更新和删除工作正常。

提前致谢

这是我的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 = 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);
}

})

这是我的index.html文件：

<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>

Answer 1

首先，您应该在控制器中使用$scope（Doc）。您可以在this post中了解有关差异的更多信息。

因此你的控制器看起来像这样。

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>

最后，核心部分来了。模型更改时，您应该致电$apply（Doc）。您可以在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);
        });
    });

因此，完整的控制器代码：

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);
    };
}]);

Answer 2

不能同意加文。首先，你所做的一切都很好。创建控制器实例比使用$ scope更好。其次，这里不需要$ apply（）。

问题是ng-repeat创建了一个新的范围。引脚更新时，app.pins不是。你应该做

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 (index) {
    $http.delete("/api/pin/" + app.pins[index].id).success(function(response) {
            app.pins.splice(index, 1)
        })
}

app.updatePin = function (index) {
    $http.put("/api/pin/" + app.pins[index].id, app.pins[index]);
}

})

和

<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 track by $index">
<img ng-src="{{ pin.image }}" alt=""/>
<div class="ui">
    <input type="text" ng-model="pin.title"/>
    <button ng-click="app.updatePin($index)">Update</button>
    <button ng-click="app.deletePin($index)">Delete</button>
</div>
</div>


</body>
</html>

点击此处：How to update ng-model on event click using $event in Angularjs

Answer 3

在发布的代码中，您有错字错误

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 not add 
              app.pins.push(data)
        })
}

ng-repeat在添加数据时不更新列表

3 个答案: