Question

我在这里创建了一个codepen http://codepen.io/eryonn/pen/ZLXLBX 我将保持响应式布局有2列，但当我点击＆＃34;打开＆＃34;在其中一个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添加到functions参数中，以便您可以访问div，并使用jQuery Lite对其进行编辑。

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

将$event传递给DOM。

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

您现在必须编辑.extended课程的CSS，对于您的布局结构可能会很棘手。但那就是你可以通过添加类来改变点击高度。

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

响应列和可扩展div

1 个答案: