在角度材料对话框数据输入/推送后更新ng-repeat

Update ng-repeat after Angular Material dialog data entry / push

本文关键字：更新 ng-repeat 输入 材料 对话框 数据      更新时间：2023-09-26

>我正在尝试将一个新对象添加到ng-repeat数组中。数组是使用通过$http请求获取的数据创建的。我需要能够在对话框中输入的数据传递给一个函数，该函数然后将此数据作为对象推送到数组中并更新视图。我可以在控制台中记录输入的值，即使我记录数组，它也会显示更新的值，但不会更新视图。此外，如果我添加一个带有不在对话框中的按钮的对象，它将更新数组。

更新

在使用Chrome的Angular ng-Inspector查看范围概述后，我可以看到新对象正在添加到控制器范围内的数组中，该控制器是ng-repeat发生的元素的父级。发生 ng-repeat 的元素有自己的范围，我可以看到数组在那里没有更新。我需要这个数组是更新的数组，因为那是 ng-repeat 所在的地方，这就是正在查看的内容。我仍然有点困惑，为什么有两个相同的数组，其中一个会改变而另一个不会。当我将对象推送到"$scope.plots"上时，我需要定位 ng-repeat 父元素的范围。我仍然没有找到一个好方法来做到这一点。

这是我的对话 

function showAdd(ev) {
        $mdDialog
            .show({
                controller: DialogController,
                templateUrl: '/templates/addDialog.html', //contains inputs that are modeled to values as seen in the push function below. A button calls addPlant()
                targetEvent: ev,
                clickOutsideToClose: true,
                openFrom: 'left'
            }).then(function(added) {
                newPlant(added);
        })
    }

这是我的对话框控制器

function DialogController($scope, $mdDialog, $http) {
$scope.addPlant = function (added) {
    for (var i = 0; i < added.quantity; i++) {
        $http.post('/addPlant', added).then(function () { //this is just posting the data to a database, not related to the issue.
                $mdDialog.hide(added);
            }
        });
    }
};

和推送功能

var newPlant = function(added) {
        $scope.plots.push({
            'plot': added.plot,
            'varieties': [{
                'count': added.quantity,
                'variety': added.variety
            }],
            'count': added.quantity
        });

我最终不得不创建一个服务并从rootScope广播添加的对象。我为侦听广播的 ng-repeat 元素创建了一个单独的控制器。

当对话框关闭时，它会解析将表单数据传递给服务的承诺。 

$mdDialog
        .show({
            controller: 'DialogCtrl as dc',
            templateUrl: '/templates/addDialog.html',
            targetEvent: ev,
            clickOutsideToClose: true,
            openFrom: 'left'
        }).then(function(added) {
            addPlant.prepForBroadcast(added) //calling service in promise, passing 'added' input values
    })

我创建了一个服务来广播对象

var myApp= angular.module('myApp');
myApp.factory('addPlant', ['$rootScope', function($rootScope) {
    var box= {}; //I like to call the designated factory object a 'box'
    box.newPlant = {};
    box.prepForBroadcast = function(added) {
        box.newPlant = added;
            this.broadcastItem();
    };
    box.broadcastItem = function() {
        $rootScope.$broadcast('broadcast');
    };
    return box; //ship out the box with the newPlant
}]);

还有一个单独的控制器用于 ng 重复元素，侦听广播

myApp.controller('ListCtrl', ['$scope','addPlant', function($scope, addPlant) {
$scope.$on('broadcast', function() { //listening for broadcast
        $scope.plots.push({
            'plot': addPlant.newPlant.plot,
            'count': addPlant.newPlant.quantity,
            'varieties': [{
                'variety': addPlant.newPlant.variety,
                'count': addPlant.newPlant.quantity
            }]
        });
    })
}]);
相关文章：