[英]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. 关闭
md-dialog
应用程序中的md-dialog
后,我想更改列表中的值。 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?! 有人可以帮我吗?
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. 如果要将项目添加到数组的开头,请使用unshift()方法将项目添加到数组的开头。 vm.werteliste.unsift(item);
vm.werteliste.unsift(item);
I suspect the problem is that you are passing wert into the dialog and not fc.werteliste 我怀疑问题是您正在向对话框传递错误信息,而不是fc.werteliste
Hope that helps 希望能有所帮助
I believe you can just assign result item
to openDialog item
我相信你可以将结果
item
分配给openDialog item
Also you maybe need $scope.$apply
另外你可能需要
$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');
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.