Angularjs – 更新JSON

发布时间：2020-12-17 17:12:35 所属栏目：安全来源：网络整理

导读：我对 Angularjs很新,并且在解决如何更新我从JSON创建的$scope元素时遇到了问题.基本上我有一个包含抓取JSON的函数的服务： app.service('JSONService',function($http){ return{ getJSON: function(){ return $http.get('posts.json') .then(function(respon

我对 Angularjs很新,并且在解决如何更新我从JSON创建的$scope元素时遇到了问题.基本上我有一个包含抓取JSON的函数的服务：

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

然后我有一个Controller,它包含一个函数,它在按钮点击时获取JSON数据并将其放入$scope.data和第二个函数,我想用它来更新$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以便：

>它实际上更新
>更新反映在我的视图中

我试过$broadcast,$scope.data.push,$scope.data.posts.push.这些要么没有工作,要么没有错误.我确信这可能是一个简单的答案,但我觉得我可能对Angularjs和JSON没有经验可以接受它.提前致谢.

解决方法

所以我认为上面的代码存在一些问题.希望这可以帮助你理顺它：

$http.get()函数返回“promise”. Promise有一个你正在使用的then()函数,但你可能应该调整以获取返回的数据并将其直接放入$scope.在服务中的then()内部执行“return”语句实际上没有任何地方可以去,因为请求是异步的. Angular知道如何使用promises,因此您可以绑定到UI中的数据,但实际上您不会直接在$scope.data下找到数据. $scope.data仍然是一个promise对象,数据将在另一个属性中(类似于$scope.data.promiseData – 虽然不记得属性是什么).你可以像这样调整：

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

控制器：

app.controller('PostController',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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!