关闭对话框(角度材料)后如何更改值?

时间:2017-05-03 12:43:49

标签: javascript angularjs angular-material mddialog

我希望在关闭我的webapp中的md-dialog后更改列表中的值。这意味着,首先您单击一行然后打开由角度材料定义的对话框。在我更改此调用对象中的值并单击"确定"值需要在列表中更新。目前itworks是异步的。在对话框视图中更改值后,在我单击" OK"。

之前,它会立即在列表中更改。

当我使用单个变量测试我的方法时,它可以在下面的代码中看到:

//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');
            });
        }

但是对于列表值,它不起作用。我不知道为什么......这里是选定行的代码示例:

//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');
            });
        }

有人可以帮助我吗?!

2 个答案:

答案 0 :(得分:1)

如果要将项添加到数组的前面,请使用unshift()方法将项添加到数组的开头。 vm.werteliste.unsift(项目);

我怀疑问题是你将wert传递给对话而不是fc.werteliste

希望有所帮助

答案 1 :(得分:0)

我相信您只需将结果item分配给openDialog item

即可

您也可能需要$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');
        });
    }