Angular Material從$ mdDialog獲取數據並按索引將其傳遞到表中

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解析時處理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();
            };
        }
    });
};

其他變化

您還需要在表行中存儲每個值的屬性。 必須為表中的每個元素存儲占位符和收藏夾顏色。

在這里 ，對unk車手的改變反映了所有這些想法。