Question

请提示我如何通过索引从结果表中的模态对话框窗口传递数据。现在，数据立即传递到表的所有列中。但是需要将对话框表格中的数据保存在表格中的某个列中。

示例：第一个对话框表单中的数据传入表结果的第一列，第二个对话框表单中的数据传入表结果的第二列等。

此处链接到Plunker https://plnkr.co/edit/Auz0ydFFaQW9h6zF9PO6?p=preview

控制器（角度）：

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>

对话窗口

<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">&#xE5CD;</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>

Answer 1

我不完全确定我知道你在问什么，但我会回答我认为你的意思。

从对话框中获取数据

$mdDialog.show()返回一个承诺。这意味着您可以使用.then(...)函数在结算时处理promise的结果。您可以通过调用$mdDialog.hide()来解决对话问题（如调用.cancel()）。您可以将任何参数传递给.hide()。

例如：

$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.
    });

您甚至可以将表单中的值传递给.hide()。

将数据传递到对话框

$ mdDialog允许您向控制器提供“本地人”。本地注入到控制器函数中，就像其他依赖项一样。以下示例演示了这一点。

$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();
            };
        }
    });
};

其他变更

您还需要在表格中存储每个vaule的属性。必须为表中的每个元素存储占位符和喜欢的颜色。

对plunkr here的更改反映了所有这些想法。

Angular Material从$ mdDialog获取数据并按索引将其传递给表

1 个答案:

从对话框中获取数据

将数据传递到对话框

其他变更