我在这里创建了一个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);
});
最佳答案
将点击 $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
}
关于javascript - 响应列和可扩展的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41875702/