在parse.com成功保存时动态更新ng-repeat行

Dynamically update ng-repeat rows on successful parse.com save

本文关键字：动态 更新 ng-repeat 保存 parse com 成功      更新时间：2023-09-26

我有这个AngularJS控制器

app.controller('dataCtrl', function($scope) {
    function getData() {
        var myData = Parse.Object.extend('myData');
        var query = new Parse.Query(myData);
        query.find({
            success: function(results) {
                $scope.$apply(function() {
                    $scope.resultData = results.map(function(obj) {
                        return {
                            startDate: obj.get('StartDate'),
                            endDate: obj.get('EndDate'),
                            investment: obj.get('Investment'),
                            format: obj.get('Format'),
                            partner: obj.get('Partner'),
                            purpose: obj.get('Purpose')
                        }
                    });
                });
            }
        });
    }
    getData();
    $scope.refreshData = function() { 
        getData();
    }
    $scope.submit = function() { {
        var myData = Parse.Object.extend('myData');
        var formData = new myData();
        formData.save({
            StartDate:  $scope.startDate,
            EndDate:    $scope.endDate,
            Investment: parseInt($scope.investment),
            Format:     $scope.format,
            Partner:    $scope.partner,
            Purpose:    $scope.purpose
        }, {
            success: function(formData) {
                console.log('Success');
            }
        })
    }
});

伴随<form ng-submit="submit()">

和

<tr ng-repeat="x in resultData">
    <td>{{x.startDate | date: 'yyyy-MM-dd'}}</td>
    <td>{{x.endDate | date: 'yyyy-MM-dd'}}</td>
    <td>{{x.investment}}</td>
    <td>{{x.format}}</td>
    <td>{{x.partner}}</td>
    <td>{{x.purpose}}</td>
</tr>

我可以通过调用refreshData()函数的按钮手动成功加载新数据。但是，我希望视图在成功提交表单时使用新创建的行更新ng-repeat。我该怎么做呢?

您可以保存数据并在保存时获得响应对象。你必须把响应对象放到模型resultData

中

您的响应数据将放在formData下。

success: function(formData) {
    $scope.resultData=formData;
    console.log('Success');
}

当您从api获得成功响应时，您可以将数据对象添加到ng-repeat列表中。它将在你的ng-repeat列表中呈现新添加的对象。

用于在顶部添加已添加的对象:

jQuery.merge([existed list], {new object});

它会达到你的目的。

使用array .push()将任何内容放入数组。

var a=[], b={};
a.push(b);    
// a[0] === b;

关于数组的额外信息

一次添加多个条目

var x = ['a'];
x.push('b', 'c');
// x = ['a', 'b', 'c']

在数组开头添加元素

var x = ['c', 'd'];
x.unshift('a', 'b');
// x = ['a', 'b', 'c', 'd']

将一个数组的内容添加到另一个数组

var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
x.push.apply(x, y);
// x = ['a', 'b', 'c', 'd', 'e', 'f']
// y = ['d', 'e', 'f']  (remains unchanged)

从两个数组的内容创建一个新的数组

var x = ['a', 'b', 'c'];
var y = ['d', 'e', 'f'];
var z = x.concat(y);
// x = ['a', 'b', 'c']  (remains unchanged)
// y = ['d', 'e', 'f']  (remains unchanged)
// z = ['a', 'b', 'c', 'd', 'e', 'f']

希望对你有帮助。

引用自:如何将对象添加到数组

您必须将新的行对象附加到resultData。

对象keys似乎不匹配之间的AngularJS范围对象模型和解析对象模型。创建Adaptor方法将使此任务更容易。

function createMyDataObjectFromParseObject(parseObject){
    return {
        startDate: parseObject.get('StartDate'),
        endDate: parseObject.get('EndDate'),
        investment: parseObject.get('Investment'),
        format: parseObject.get('Format'),
        partner: parseObject.get('Partner'),
        purpose: parseObject.get('Purpose')
    };
}

在both success方法中使用，

数据获取调用应该是这样的，

query.find({
        success: function(results) {
            $scope.$apply(function() {
                $scope.resultData = results.map(function(obj) {
                    return createMyDataObjectFromParseObject(obj);
                });
            });
        }
    });

新行创建应该像这样，

$scope.submit = function() { {
    var myData = Parse.Object.extend('myData');
    var formData = new myData();
    formData.save({
        StartDate:  $scope.startDate,
        EndDate:    $scope.endDate,
        Investment: parseInt($scope.investment),
        Format:     $scope.format,
        Partner:    $scope.partner,
        Purpose:    $scope.purpose
    }, {
        success: function(newParseObject) {
            var newObj = createMyDataObjectFromParseObject(newParseObject);
            $scope.resultData.push(newObj)
        }
    })
}
相关文章：