Ich erstelle eine kleine App, wo ich einen eckigen Materialdialog öffne, um Kundenadressinformationen zu bearbeiten. Momentan öffnet sich der Dialog und zeigt die vorhandenen Adressinformationen an. Wenn die Daten im Dialog bearbeitet und übergeben werden, wird die Datenbank aktualisiert. Die Adressinformationen auf der Seite werden jedoch nicht aktualisiert.angularjs dialog form data nicht update scope
Die Add1 und Add2 auf der Seite sollten auf die neuen Informationen aktualisiert werden, nachdem die Datenbank aktualisiert wurde. Ich kann nicht herausfinden, wie das geht bitte helfen?
Ich möchte nicht die Hauptseite aktualisieren, wie der Benutzer die Adresse eingibt, nur wenn die Exec-Funktion abgeschlossen ist.
HTML:
<div ng-controller="AppCtrl" class="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak="" ng-app="MyApp">
<div class="dialog-demo-content" layout="row" ayout="row" layout-wrap="" layout-margin="" layout-align="center">
<p>Add1: {{ customerdetails.Add1 }}</p>
<p>Add2: {{ customerdetails.Add2 }}</p>
<br/>
<md-button class="md-primary md-raised" ng-click="showTabDialog($event)">
Open Dialog
</md-button>
</div>
<script type="text/ng-template" id="tabDialog.tmpl.html"><md-dialog aria-label="Mango (Fruit)">
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; ">
<md-tabs md-dynamic-height md-border-bottom>
<md-tab label="one">
<md-content class="md-padding">
<md-input-container class="md-block">
<label>Address 1</label>
<input ng-model="customerdetails.Add1">
</md-input-container>
<md-input-container class="md-block">
<label>Address 2</label>
<input ng-model="customerdetails.Add2">
</md-input-container>
</md-content>
</md-tab>
</md-tabs>
</md-dialog-content>
<md-dialog-actions layout="row">
<md-button ng-click="editAddressSubmit()" style="margin-right:20px;" >
Update
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
</script>
</div>
JS
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
$scope.customerdetails={
Add1: 'line 1',
Add2: 'line 2'
}
$scope.showTabDialog = function(ev) {
$mdDialog.show({
controller: 'AppCtrl',
templateUrl: 'tabDialog.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
})
};
$scope.cancel = function() {
$mdDialog.cancel();
};
$scope.editAddressSubmit = function() {
console.log('edit address submit funtion clicked')
//in live code the database is updated here but the Add1 and Add2 is not updated on the main page once the dialog is closed!
return $scope.exec('call/UpdateCustomerSQL',
{
Add1: $scope.customerdetails.Add1,
Add2: $scope.customerdetails.Add2
}
).then(function() { // close popup
console.log('then function close popup')
$mdDialog.cancel();
})
}
}) //close controller
dank mimick, das ist gut! Kann ich das gesamte customerdetails-Objekt in Locals übergeben? Da gibt es tatsächlich viele Variablen, nicht nur 2. danke – Janey
ja natürlich kannst du. – CozyAzure
@ Janey lassen Sie mich wissen, das Ergebnis, und markieren Sie akzeptierte Antwort, wenn es Ihr Problem gelöst hat (oder zeigen Sie zumindest in die richtige Richtung) – CozyAzure