Angularjs - mise à Jour JSON

Je suis très nouveau pour Angularjs et je suis d'avoir des problèmes à trouver comment mettre à jour un $champ d'application de l'élément que j'ai créé à partir de JSON. Fondamentalement, j'ai un service qui contient la fonction qui attrape le JSON:

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

J'ai alors d'un Contrôleur qui contient une fonction qui récupère les données JSON sur le bouton cliquez sur et la met dans $champ d'application.données et une deuxième fonction que je voudrais utiliser pour mettre à jour $champ d'application.données:

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

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

Actuellement, j'ai réussi à saisir les données JSON et je suis en mesure de l'utiliser pour remplir les aspects de mon point de vue, mais je suis coincé sur la façon de procéder à la mise à jour $champ d'application.les données de sorte que:

  1. Il fait les mises à jour
  2. La mise à jour se reflète à mon avis

J'ai essayé $de diffusion, $champ d'application.les données.pousser, $champ d'application.les données.les postes.push. Ceux-ci ont soit plat pas travaillé ou donné des erreurs. Je suis sûr que ça pourrait être une réponse simple, mais je sens que j'ai peut-être pas d'expérience avec Angularjs et JSON pour ramasser sur elle. Merci à l'avance.

OriginalL'auteur johnnytop | 2013-03-12

  1. 3

    Donc je pense qu'il y a quelques problèmes avec le code ci-dessus. Espérons que cela peut vous aider à obtenir redressé:

    $Http.get() renvoie une "promesse". Les promesses n'ont pas une fonction de (), que vous utilisez, mais vous devrez probablement ajuster pour prendre les données qui revient mettre directement dans $champ d'application. Faire un "return" à l'intérieur de l'époque() dans votre service, n'a pas vraiment d'endroit où aller, à ce point, puisque la requête est asynchrone. Angulaire sait comment travailler avec des promesses, de sorte que vous pouvez lier les données dans l'INTERFACE utilisateur, mais vous allez effectivement pas à trouver les données directement sous $champ d'application.les données. $champ d'application.les données seront toujours une promesse d'objet, et les données seront dans un autre bien (quelque chose comme $champ d'application.les données.promiseData -- ne me souviens pas exactement ce que la propriété est tout de même). Vous pouvez l'ajuster comme ceci:

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

    Contrôleur:

    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>
    Génial merci! J'ai dû utiliser $champ d'application.les données.les postes.push({clé: valeur, ...}); mais c'est juste à cause de mes données JSON. Donc j'ai jamais fait assigner les données de $champ d'application.les données?
    Correct. $champ d'application.les données n'avaient jamais vraiment les données. C'était une promesse de l'objet (voir Angulaire de docs pour q $service $http utilise en interne). Votre INTERFACE utilisateur a cause de certains Angulaire de la magie dans le travail avec des promesses, mais vous n'auriez pas trouvé vos données dans $champ d'application.les données.

    OriginalL'auteur Jason Aden

  2. 0

    En fait, alors que le code ci-dessus est correcte, dans ce cas, le getJSON fonction n'est pas appelée n'importe où, de sorte que le $scope.les données ne sont jamais remplis.

    EN outre, toutes les modifications poussé seulement pousser à l'étendue locale et ne sont jamais en annexe le fichier JSON, de sorte que chaque fois que la page est actualisée, vous perdrez toutes les modifications. Si vous voulez de la persistance que vous aurait besoin, localStorage (par exemple ngStorage) ou une base de données

    OriginalL'auteur stevematdavies