CODEWITHSUNDEEP
javascriptangularjsangular-materialmddialog
yuro
yuro

Reputation: 2219

How to change value after closing dialog (angular material)?

I want to change the value in my list after closing the md-dialog in my webapp. That means, at first you click on a row then it opens a dialog defined by angular material. After I change a value in this invoked object and click on "OK" the value need to be updated in the list. Currently itworks asynchronously. When the value is changed in the dialog view it is immediately changed in the list before I clicked on "OK".

When I tested my approach with a single variable it works as you can see in the code below:

//Main view:

    <div class="md-padding">
        <p>{{c.txtSample}}</p>

        <md-button class="md-raised md-primary" ng-click="fc.openDialog(c.txtSample)">
            Klick
        </md-button>
    </div>


//dialog view:
<div class="md-dialog-container">
    <md-dialog>
        <md-dialog-content class="md-dialog-content">
            <md-input-container class="md-block">
                <label>Sample text</label>
                <input ng-model="c.textInput" />
            </md-input-container>
        </md-dialog-content>

        <md-dialog-actions>
            <md-button class="md-raised" ng-click="c.klickOK(c.textInput)">
                OK
            </md-button>
        </md-dialog-actions>
    </md-dialog>
</div>

//MainCtrl
vm.txtSample = 'Change the inputtext.';
vm.openDialog = openDialog;

        function openDialog(item) {
            $mdDialog.show({
                parent: angular.element(document.body),
                templateUrl: 'App/views/testDialog.html',
                controller: function TestCtrl($scope, sampleTxt) {
                    var vm = this;

                    vm.textInput = sampleTxt;
                    vm.klickOK = klickOK;

                    function klickOK(item) {
                        $mdDialog.hide(item);
                    }
                },
                controllerAs: 'c',
                preserveScope: true,
                locals: {
                    sampleTxt: item
                }
            }).then(function (item) {
                vm.txtSample = item;
            }, function () {
                alert('Abgebrochen');
            });
        }

But for a list value it doesn't work. I don't know why... Here the code example with a selected row:

//Main view:
<div class="md-padding">
    <div ng-repeat="wert in fc.werteliste track by $index">
        <span flex="20">{{wert.wert1}}</span>
        <span flex="20">{{wert.wert2}}</span>
        <span flex="40">{{wert.wert3}}</span>

        <md-button class="md-raised md-primary" ng-click="fc.openDialog(wert)">
            Klick
        </md-button>
    </div>
</div>

//Dialog view:
<div class="md-dialog-container">
    <md-dialog>
        <md-dialog-content class="md-dialog-content">
            <md-input-container class="md-block">
                <label>Wert 1</label>
                <input ng-model="c.textInput.wert1" />
            </md-input-container>

            <md-input-container class="md-block">
                <label>Wert 2</label>
                <input ng-model="c.textInput.wert2" />
            </md-input-container>

            <md-input-container class="md-block">
                <label>Wert 3</label>
                <input ng-model="c.textInput.wert3" />
            </md-input-container>
        </md-dialog-content>
        <md-dialog-actions>
            <md-button class="md-raised" ng-click="c.klickOK(c.textInput)">
                OK
            </md-button>
        </md-dialog-actions>
    </md-dialog>
</div>

//MainCtrl:
vm.openDialog = openDialog;

        function openDialog(item) {
            $mdDialog.show({
                parent: angular.element(document.body),
                templateUrl: 'App/views/testDialog.html',
                controller: function TestCtrl($scope, objItem) {
                    var vm = this;

                    vm.textInput = objItem;

                    vm.klickOK = klickOK;
                    function klickOK(item) {
                        $mdDialog.hide(item);
                    }
                },
                controllerAs: 'c',
                preserveScope: true,
                locals: {
                    objItem: item
                }
            }).then(function (item) {
                //e.g. the first item
                vm.werteliste[0] = item;
            }, function () {
                alert('Abgebrochen');
            });
        }

Could anyone help me?!

Upvotes: 0

Views: 894

Answers (2)

Xun Chao
Xun Chao

Reputation: 82

If you want to add the item to the front of the array, use the unshift() method to add items to the beginning of the array. vm.werteliste.unsift(item);

I suspect the problem is that you are passing wert into the dialog and not fc.werteliste

Hope that helps

Upvotes: 1

Leguest
Leguest

Reputation: 2137

I believe you can just assign result item to openDialog item

Also you maybe need $scope.$apply

 vm.openDialog = openDialog;

    function openDialog(item) {
        $mdDialog.show({
            parent: angular.element(document.body),
            templateUrl: 'App/views/testDialog.html',
            controller: function TestCtrl($scope, objItem) {
                var vm = this;

                vm.textInput = objItem;

                vm.klickOK = klickOK;
                function klickOK(item) {
                    $mdDialog.hide(item);
                }
            },
            controllerAs: 'c',
            preserveScope: true,
            locals: {
                objItem: item
            }
        }).then(function (resultItem) {
            //e.g. the first item
            item = resultItem;

            $scope.$apply(); // maybe its unnecessary
        }, function () {
            alert('Abgebrochen');
        });
    }

Upvotes: 0

Related Questions