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

Question

请提示我如何通过索引从结果 table 中的模态对话框 window 传递数据。现在数据一次传入 table 的所有列。但只需要将对话框中的数据保存在table中的某一列。

示例：来自第一个对话框表单的数据传递到 table 结果的第一列，来自第二个对话框表单的数据传递到 table 结果的第二列，等等。

这里 link 到 Plunker https://plnkr.co/edit/Auz0ydFFaQW9h6zF9PO6?p=preview

控制器（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>

对话框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">&#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()returns一个承诺。这意味着您可以使用 .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 允许您向控制器提供 'locals'。局部变量像其他依赖项一样被注入到控制器函数中。以下示例演示了这一点。

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

其他变化

您还需要在 table 行中存储每个值的属性。必须为 table.

中的每个元素存储占位符和最喜欢的颜色

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

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

Angular Material get data from $mdDialog and pass it in a table by index

javascript

angularjs

angularjs-material

mddialog

从对话框获取数据

向对话框传递数据

其他变化