Question

我有这个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。我怎么能这样做？

Answer 1

您可以保存数据，在保存时您将获得响应对象。你必须将该响应对象放在模型resultData

中

您的回复数据将来自formData。

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

Answer 2

当您从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']

希望它会有所帮助。

参考文献：How to add an object to an array

Answer 3

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

似乎对象keys在AngularJS Scope Object Model和Parse Object Model之间不匹配。创建适配器方法将使此任务更容易。

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')

    };
}

在两种成功方法

中使用它

数据提取呼叫应该是这样的，

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

New Row Creation应该是这样的，

$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)
        }
    })
}

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

3 个答案: