Geek Answers Handbook

How to use md dialog with input form in angularjs?

I have a problem with the md dialog box. This is the code ( http://codepen.io/anon/pen/EyxyXj ) of my application. When I open a dialog and then click "Save", I create a map. Why is the data in my input form not saved on the card? I think there are some problems with volume. Can anybody help me?

.then(function(answer) { questList.allsQ.push({ titolo: questList.titolo , capitolo: questList.capitolo, descrizione: questList.descrizione, importo: questList.importo, data: questList.data }); questList.titolo = ''; questList.capitolo = ''; questList.descrizione = ''; questList.importo = ''; questList.data = ''; }

The push function works, but all the properties are undefined after I click save. Thanks to everyone.

+5
source share
2 answers

Fix your ng model of the input field in html as below

 <md-input-container class="md-block" flex-gt-xs=""> <label>Titolo</label> <input ng-model="questList.titolo" size="30" placeholder="inserisci il titolo"> </md-input-container>

You need to pass on your data that you updated in the model in order to hide the () function, as shown below.

  .controller('DemoCtrl', function($scope, $mdDialog, $mdMedia) { $scope.status = ' '; var questList = this; questList.allsQ = []; questList.openDialog = function($event) { $mdDialog.show({ controller: function ($timeout, $q, $scope, $mdDialog) { var quest =this; // you will be returning quest $scope.cancel = function($event) { $mdDialog.cancel(); }; $scope.finish = function($event) { $mdDialog.hide(); }; $scope.answer = function() { //pass quest to hide function. $mdDialog.hide(quest); }; }, controllerAs: 'questList', templateUrl: 'dialog.tmpl.html', parent: angular.element(document.body), targetEvent: $event, clickOutsideToClose:true, locals: {parent: $scope}, }) .then(function(quest) { //here quest has data you entered in model questList.allsQ.push({ titolo: quest.titolo , capitolo: quest.capitolo, descrizione: quest.descrizione, importo: quest.importo, data: quest.data }); questList.titolo = ''; questList.capitolo = ''; questList.descrizione = ''; questList.importo = ''; questList.data = ''; console.log(questList.allsQ); console.log(questList.allsQ.length); }); }; });
+2
source

The answer I am going to provide is definitely not the best answer, but that it works.

remove ng-submit from the md-dialog template on the Salva button, add ng-click="answer(questList)" and make it as if

  questList.allsQ.push({ titolo: answer.titolo , capitolo: answer.capitolo, descrizione: answer.descrizione, importo: answer.importo, data: answer.data });

there is an example that I unlocked your code

http://codepen.io/tougo/pen/QEWGKv

+2
source

More articles:


All Articles