javascript - 响应列和可扩展的 div

Question

我在这里创建了一个codepen http://codepen.io/eryonn/pen/ZLXLBX我将在其中保留 2 列的响应式布局，但是当我在其中一个 div 中单击“打开”时，它的高度应该扩展为其他 100px。有可能吗？是否可以使用这种页面结构？无论如何，这是代码:

<div ng-controller="gridListDemoCtrl as vm" flex="" ng-cloak="" class="gridListdemoDynamicTiles" ng-app="MyApp">
  <md-grid-list md-cols-sm="1" md-cols-md="2" md-cols-gt-md="2" md-row-height-gt-md="3:1" md-row-height="4:3" md-gutter="8px" md-gutter-gt-sm="4px">

    <md-grid-tile ng-repeat="tile in vm.tiles" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1">
      <md-card layout-fill ng-class="tile.background">
        <md-card-title>
          <md-card-title-text>
            <span class="md-headline">Action buttons</span>
          </md-card-title-text>
        </md-card-title>
        <md-button type="button" data-ng-if="tile.showDetails" data-ng-click="tile.showDetails = false">
          Close
        </md-button>
        <md-button type="button" data-ng-if="!tile.showDetails"  ng-click="tiles.showDetailsFnt(tile)">
          Open
        </md-button>
      </md-card>
    </md-grid-tile>
  </md-grid-list>
</div>

Js

angular
  .module('MyApp',['ngMaterial', 'ngMessages'])
  .controller('gridListDemoCtrl', function($scope) {
     $scope.tiles = {
       showDetails: false,
       showDetailsFnt: function(tile) {
         console.log(tile);
         tile.showDetails = true;
       }
     };
    this.tiles = buildGridModel({
            icon : "avatar:svg-",
            title: "Svg-",
            background: ""
          });

    function buildGridModel(tileTmpl){
      var it, results = [ ];

      for (var j=0; j<11; j++) {

        it = angular.extend({},tileTmpl);
        it.icon  = it.icon + (j+1);
        it.title = it.title + (j+1);
        it.span  = { row : 1, col : 1 };

        switch(j+1) {
          case 1:it.background = "red";break;
          case 2: it.background = "green";         break;
          case 3: it.background = "darkBlue";      break;
          case 4:it.background = "blue";break;
          case 5:it.background = "yellow";break;
          case 6: it.background = "pink";          break;
          case 7: it.background = "darkBlue";      break;
          case 8: it.background = "purple";        break;
          case 9: it.background = "deepBlue";      break;
          case 10: it.background = "lightPurple";  break;
          case 11: it.background = "yellow";       break;
        }

        results.push(it);
      }
      return results;
    }
  })
  .config( function( $mdIconProvider ){
    $mdIconProvider.iconSet("avatar", 'icons/avatar-icons.svg', 128);
  });

Answer 1

将点击 $event 添加到函数参数中，这样您就可以访问 div，并使用 jQuery Lite 对其进行编辑。

$scope.tiles = {
  showDetails: false,
  showDetailsFnt: function($event, tile) {  
    angular.element($event.currentTarget.parentElement).addClass('extended');
  }
};

在 DOM 中传递 $event。

<md-button type="button" data-ng-if="!tile.showDetails"  ng-click="tiles.showDetailsFnt($event, tile)">
   Open
 </md-button>

您现在必须为 .extended 类编辑您的 CSS，这可能会影响您的布局结构。但这就是您可以通过添加类来更改点击时 div 的高度的方法。

.extended {
  height: 200px; // Or whatever
}