Question

我对AngularJS很陌生，并且在解决如何更新我从JSON外部数据文件创建的$scope元素时遇到了问题。

基本上我有一个包含抓取JSON的函数的服务：

MyApp.factory("wwprService", function($http){
var _wwpr = [];

var _getwwpr = function(){
    $http.get("/js/data/wwpr.json")
        .then(function(results){
            //Success
            angular.copy(results.data, _wwpr); 
            //alert(results);
        }, function(results){
            //Error
        })
}

var _addNewwwpr = function(val1,val2,val3,val4){
    _wwpr.splice(0,0, val1, val2, val3, val4);
    $http.get("/js/data/wwpr.json") // here i want to add new datas 
}

return{
    wwpr: _wwpr,
    getwwpr: _getwwpr,
    addNewwwpr: _addNewwwpr
};

}）;

然后我有一个Controller，其中包含一个函数，该函数在单击按钮时获取JSON数据并将其放入$scope.wwp以及我希望用于更新该JSON中的$scope.wwp的第二个函数数据文件：

MyApp.controller("wwprCtrl", function ($scope, wwprService){

// Executes when the controller is created
$scope.wwpr = wwprService.wwpr;

wwprService.getwwpr();

$scope.addNewwwpr = function(wwpProjectName,wwpactivityType,wwpplanDate,wwpefforts){
//alert(wwpProjectName);
    var getProjectName = {projectName: wwpProjectName};
    var getactivityType = {activityType: wwpactivityType};
    var getplanDate = {planDate: wwpplanDate};
    var getefforts = {efforts: wwpefforts};
    wwprService.addNewwwpr(getProjectName,getactivityType,getplanDate,getefforts);
     $scope.wwpr.push({projectName: wwpProjectName});
}

}）;

JSON数据文件：

[
{
    "projectName": "PMD",
    "activityType": "Coding",
    "planDate": "12/12/14",
    "efforts": "8"
},
{
    "projectName": "PMD",
    "activityType": "Coding",
    "planDate": "12/12/14",
    "efforts": "8"
} //here i want add new json data

目前，我成功从外部文件中获取JSON数据，并且可以使用它来填充我的视图的各个方面，但我仍然坚持如何继续更新$scope.wwp以便：

实际更新
更新会反映在我的视图中

我已尝试$scope.wwp.push，$scope.wwp.posts.push。这些要么没有工作，要么没有错误。我确定这可能是一个简单的答案，但我觉得我可能对AngularJS和JSON没有经验可以接受它。

Answer 1

我认为你需要告诉AngularJS你的代码的异步部分发生了一些变化：

var _getwwpr = function(){
    $http.get("/js/data/wwpr.json")
        .then(function(results){

            //Success
            angular.copy(results.data, _wwpr); 
            //alert(results);
        }, function(results){

        //Error
        })
}

应该成为

var _getwwpr = function(){
    return $http.get("/js/data/wwpr.json")
        .then(function(results){
            //Success
            angular.copy(results.data, _wwpr); 
            //alert(results);
        }, function(results){
        //Error
        })
}

这样，您的数据模型将返回一个承诺，然后可以在视图中使用该承诺来触发＆＃34;刷新＆＃34;。

//Controller
wwprService.getwwpr().then($scope.apply);

进一步说明

AngularJS执行＆＃34;脏检查＆＃34;在$scope个对象上，如果它们已经更改，它会将这些更改传播到DOM绑定。您目前遇到的问题是您的应用程序中没有任何内容告诉AngularJS重新运行其脏检查。

重新运行脏检查是（大部分）AngularJS本身对常见的DOM事件（如点击等）进行处理。但是，由于您要在服务中返回需要放入DOM的数据可以使用$scope.apply()手动触发此功能。

如何使用AngularJS服务在外部文件中添加新数据JSON数据

JSON数据文件：

1 个答案:

进一步说明