Please hint me how to pass data from modal dialog window in table of result by index. Now data pass in all columns of table at once. But need to data from dialog form save in a certain column in the table only.
Example: data from first dialog form to pass in a first column of a table result, data from second dialog form to pass in a second column of a table result and etc.
Here link to Plunker https://plnkr.co/edit/Auz0ydFFaQW9h6zF9PO6?p=preview
Controller (angular):
angular.module('myApp', ['ngMaterial', 'ngMessages'])
.controller('OnePagelCtrl', ['$scope', '$mdDialog', '$compile', function($scope, $mdDialog, $compile) {
$scope.tableRows = ['AAA','BBB','CCC','DDD','EEE', 'FFF']
$scope.open = function(index, ev, it) {
$scope.showText = true;
$mdDialog.show({
templateUrl: "test.html",
clickOutsideToClose: true,
openFrom: {top: -50, width: 30, height: 80},
closeTo: {left: 500},
targetEvent: ev,
scope: $scope,
preserveScope: true,
controller: function($scope) {
$scope.cancel = function() {
$mdDialog.cancel();
};
},
});
};
$scope.clearValue = function() {
$scope.placeholder1 = undefined;
$scope.placeholder2 = undefined;
$scope.favoriteColor = undefined;
$scope.myForm.$setPristine();
};
$scope.save = function() {
if ($scope.myForm.$valid) {
$scope.myForm.$setSubmitted();
$scope.showText = true;
$mdDialog.cancel();
} else {
alert('Form was invalid!');
return true;
}
};
}])
html:
<!-- table 1 -->
<table>
<tr>
<th>
<div class="tablehaed">XXX</div>
</th>
<th>
<div class="tablehaed">Form</div>
</th>
</tr>
<tr ng-repeat="tablerow in tableRows">
<td>{{tablerow}}</td>
<td>
<i class="material-icons md-24 md-dark" ng-click="open($index, $event, it)">insert_comment</i>
</td>
</tr>
</table>
<!-- table 1 -->
<!-- table 2 Result -->
<table class="table table-striped table-hover">
<thead>
<tr>
<th ng-repeat="tablerow in tableRows" class="table-dashboard">
{{tablerow}}
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="tablerow in tableRows" class="category-{{favoriteColor}}">
<i class="material-icons" ng-click="open($event, it, $index)">mode_edit</i>
{{placeholder1}}
<br><hr>
{{placeholder2}}
</td>
</tr>
</tbody>
Dialog window
<script type="text/ng-template" id="test.html">
<form name="myForm">
<md-dialog aria-label="Test">
<div layout-padding layout="column">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Dialog window</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon><i class="material-icons"></i></md-icon>
</md-button>
</div>
</md-toolbar>
<md-input-container>
<label>Placeholder 1</label>
<input ng-model="placeholder1">
</md-input-container>
<md-input-container>
<label>Placeholder 2</label>
<input ng-model="placeholder2">
</md-input-container>
<md-input-container flex="50">
<label>Favorite Color</label>
<md-select name="favoriteColor" ng-model="favoriteColor" required>
<md-option value="red">Red</md-option>
<md-option value="blue">Blue</md-option>
<md-option value="green">Green</md-option>
</md-select>
<div class="errors" ng-messages="myForm.favoriteColor.$error">
<div ng-message="required">Required</div>
</div>
</md-input-container>
<md-dialog-actions>
<md-button class="md-primary md-confirm-button md-button md-ink-ripple md-default-theme" ng-click="clearValue()" ng-disabled="!(quest || favoriteColor)">Clear</md-button>
<md-button class="md-primary md-confirm-button md-button md-ink-ripple md-default-theme" ng-click="save()" class="md-primary">Save</md-button>
</md-dialog-actions>
</div>
</md-dialog>
</form>
</script>
I'm not entirely certain I know what you're asking, but I'll answer both things I think you could mean.
$mdDialog.show() returns a promise. This means that you can use a .then(...) function to process the result of the promise when it resolves. You resolve a dialog by calling $mdDialog.hide() (like calling .cancel()). You can pass any argument to .hide().
For example:
$mdDialog
.show({
templateUrl: "test.html",
clickOutsideToClose: true,
openFrom: {top: -50, width: 30, height: 80},
closeTo: {left: 500},
targetEvent: ev,
scope: $scope,
preserveScope: true,
controller: function($scope) {
$scope.hide = function() {
var index = 1;
$mdDialog.hide(index);
};
$scope.cancel = function() {
$mdDialog.cancel();
};
}
})
.then(function(result) {
// Result will be 1, because .hide() was called with 1.
});
You can even pass the values from the form into .hide().
$mdDialog allow you to provide 'locals' to your controller. Locals are injected into the controller function like other dependencies. The following example demonstrates this.
$scope.open = function(index, ev, it) {
$scope.showText = true;
$mdDialog.show({
templateUrl: "test.html",
clickOutsideToClose: true,
openFrom: {top: -50, width: 30, height: 80},
closeTo: {left: 500},
locals: {
rowIndex: index
},
targetEvent: ev,
scope: $scope,
preserveScope: true,
controller: function($scope, rowIndex) {
$scope.row = $scope.tableRows[rowIndex];
$scope.cancel = function() {
$mdDialog.cancel();
};
}
});
};
You also need to store the properties for each vaule in your tablerows. The placeholders and favorite colors must be stored for each element in your table.
The changes to the plunkr here reflect all of these ideas.