Angularjs - 更新JSON [英] Angularjs - Update JSON

问题描述

我很新的Angularjs时遇到问题搞清楚如何更新我从JSON创建了一个$范围元素。基本上，我有一个包含这抓住了JSON功能的服务：

I'm very new to Angularjs and am having issues figuring out how to update a $scope element I created from JSON. Basically I have a service that contains the function which grabs the JSON:

app.service('JSONService', function($http){         
    return{
        getJSON: function(){
            return $http.get('posts.json')
                .then(function(response){
                    return response.data;
                });
        }
    };
 });

然后我有一个包含沾到按钮点击JSON数据并将其放入$ scope.data而且我想用更新$ scope.data第二函数的函数的控制器：

I then have a Controller that contains a function that gets the JSON data on button click and puts it in $scope.data and a second function that I would like to use to update $scope.data:

app.controller('PostController', function PostController($scope, JSONService){
    $scope.data;

    $scope.getJSON = function(){            
        $scope.data = JSONService.getJSON();
    };
    $scope.addPost = function(){
        // Add to $scope.data
    };
});

目前，我成功地抓住JSON数据和我能够用它来填充我的看法方面，但我被困在如何与更新$ scope.data这样进行：

Currently, I successfully grab the JSON data and am able to use it to populate aspects of my view, but I am stuck on how to proceed with updating $scope.data so that:

1. 这实际上更新


2. 更新体现在我看来

我曾尝试$广播，$ scope.data.push，$ scope.data.posts.push。这些要么平掉没有工作或给出错误。我敢肯定，这可能是一个简单的答案，但我觉得我可能是缺乏经验与Angularjs和JSON拿起它。先谢谢了。

I have tried $broadcast, $scope.data.push, $scope.data.posts.push. These have either flat out not worked or given errors. I'm sure it might be a simple answer, but I feel I may be inexperienced with Angularjs and JSON to pick up on it. Thanks in advance.

推荐答案

所以我觉得有与上面的code一对夫妇的问题。希望这可以帮助你得到它理顺了：

So I think there are a couple issues with the code above. Hopefully this can help you get it straightened out:

该$ http.get（）函数返回一个承诺。承诺有那么（）函数，你正在使用，但你可能要调整拿得到返回的数据，并把它直入$范围。在你的服务做里面的那么回归的声明（）并没有真正有任何地方在这一点走，因为请求是异步。角知道如何与承诺的工作，这样你就可以绑定到UI的数据，但你实际上并不直接在$ scope.data找到数据。 $ scope.data仍将是一个承诺的对象，并且数据将在另一个属性（类似$ scope.data.promiseData - 不记得财产正是虽然）。你可以调整如下：

The $http.get() function returns a "promise". Promises have a then() function, which you are using, but you should probably adjust to take the data that gets returned and put it straight into $scope. Doing a "return" statement inside the then() in your service does not really have anywhere to go at that point since the request was async. Angular knows how to work with promises, so you can bind to the data in the UI, but you will actually not find the data directly under $scope.data. $scope.data will still be a promise object, and the data will be in another property (something like $scope.data.promiseData -- don't remember exactly what the property is though). You could adjust like this:

app.service('JSONService', function($http){         
    return {
        getJSON: function() {
            return $http.get('posts.json');
        }
    };
})

控制器：

app.controller('PostController', function PostController($scope, JSONService){
    $scope.data;

    $scope.getJSON = function(){            
        JSONService.getJSON()
            .then(function (response) {
                $scope.data = response.data;
            });
    };
    $scope.addPost = function(postText){
        // Add to $scope.data (assuming it's an array of objects)
        $scope.data.push({postText: postText});
    };
});

HTML

<div data-ng-repeat="post in data">{{post.postText}}</div>

<input type="text" ng-model="newPostText">
<button type="button" ng-click="addPost(newPostText)">Add Post</button>

这篇关于Angularjs - 更新JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！