Question

我是AngularJS的新手，现在，我正在尝试创建最简单的web-app，从服务器加载一些JSON数据。
它现在工作正常，看起来像这样：

JS FILE

app.controller('myCont', ['$scope', '$http', function($scope, $http) {
    $scope.moreItems = function() {
        $http.post('php/index.php').
            success(function (data) {
                $scope.posts = data;
            }
        );

        console.log('Button work');
    }
}]);

HTML

<div ng-controller="myCont">  
    <span ng-click="moreItems()">Load more</span>  
    <ul>
        <li ng-repeat="some in something">{{some.here}}</li>
    </ul>
</div>

PHP为该页面生成一些JSON。每次它给我不同的数据。但我的麻烦是我不知道如何将更多数据加载到该控制器。它总是取代它，但我想结束它。

Answer 1

每次从PHP服务器检索数据时，您的代码都会覆盖$ scope.posts变量。假设您的$ scope.posts var是一个对象，并且您希望在调用moreItems()时向其添加新帖子，因为在javascript中连接两个对象是一项非常常见的任务，为了不重新发明轮子，我鼓励您使用underscore.js库或类似的_.extend函数并转到

app.controller('myCont', ['$scope', '$http'], function($scope, $http)
{
    $scope.moreItems = function()
    {
    $http.post('php/index.php').
        success(function (data)
        {
            _.extend($scope.posts, data);
        }
    );

    console.log('Button work');
});

http://underscorejs.org/#extend https://docs.angularjs.org/guide/scope

Answer 2

您可以使用 angular.extend 来连接数据。每当检索到JSON数据时，它将与同一JSON对象中的先前数据连接。

注意：如果新传入数据包含与先前JSON对象相同的属性，那么将使用新数据覆盖这些属性。如果要存储属性的旧数据，请确保传入数据包含不同的属性。

app.controller('myCont', ['$scope', '$http', function($scope, $http) {

    $scope.moreItems = function()
    {
        $http.post('php/index.php').
            success(function (data) 
                {                       
                    angular.extend($scope.posts, data)
                }
        );

        console.log('Button work');
    }
}]);

其他信息：如果要存储以前的属性数据，则可以使用浏览器本地存储来添加和检索数据。这样可以避免多次调用DB。

添加数据：

localStorageService.add("postsData", JSON.stringify($scope.posts));

回复数据：

$scope.posts = localStorageService.get("postsData");

有关browserlocalstorage的更多信息请告诉我......

如何使用Angular（JSON）加载更多内容

2 个答案: