代码之家  ›  专栏  ›  技术社区  ›  alexeyll

角度材质从$mdDialog获取数据,并按索引将其传递到表格中

  •  0
  • alexeyll  · 技术社区  · 7 年前

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

    示例:来自第一个对话框表单的数据将在表格结果的第一列中传递,来自第二个对话框表单的数据将在表格结果的第二列中传递,等等。

    此处链接到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>   
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   Joe Hawkins    7 年前

    我不能完全肯定我知道你在问什么,但我会回答你的两个问题。

    从对话框中获取数据

    $mdDialog.show() 返回承诺。这意味着您可以使用 .then(...) 函数在承诺解析时处理其结果。通过调用 $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.
        });
    

    您甚至可以将表单中的值传递到 .隐藏() .

    将数据传递到对话框

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

    其他变更

    您还需要在tablerows中存储每个变量的属性。必须为表中的每个元素存储占位符和常用颜色。

    plunkr的变化 here 反映所有这些想法。