Angular Material Design Flex Karten

Question

Ich habe dieses Stück Code, der Karten Fullwidth für mobile Geräte, 2 für für iPad/Tablet und 3 für Desktops anzeigen soll. es scheint das mobile richtige Anzeige zu werden, aber der Rest kehrt zu 4 durch

<div ng-controller="MerchantListCtrl" ng-cloak> 
    <md-content class="md-padding" layout-xs="column" layout="row"> 
     <div flex-xs="100" flex-md="50" flex-gt-md="33" layout="column" ng-repeat="merchant in merchants | filter: { featured: 'false' }" ng-show='merchants.length'> 
      <md-card> 
       <md-card-title> 
        <md-card-title-media> 
         <div class="md-media-lg card-media"> 
          img 
         </div> 
        </md-card-title-media> 
       </md-card-title> 
       <md-card-title> 
        <md-card-title-text> 
         <span class="md-headline">{{merchant.name | limitTo:27}}<span ng-if="merchant.name.length > 27">&hellip;</span></span> 
         <span class="md-subhead">Large</span> 
        </md-card-title-text> 
       </md-card-title> 
      </md-card> 
     </div> 
    </md-content> 
</div> 

Answer 1

unter Arbeitsbeispiel. Hinzugefügt wurde die layout-wrap Richtlinie auf die den md-content Tag

angular 
 
    .module('app', ['ngMaterial']) 
 
    .controller('MerchantListCtrl', merchantListCtrl); 
 

 
merchantListCtrl.$inject = ['$scope']; 
 

 
function merchantListCtrl($scope) { 
 
    $scope.merchants = [{ 
 
    name: 'hello', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'world', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'sdfsdfdsfsd ds;fdsfsdffds sdfsdfdf sfdfsdf', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'hello', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'world', 
 
    featured: 'false' 
 
    }, { 
 
    name: 'sdfsdfdsfsd ds;fdsfsdffds sdfsdfdf sfdfsdf', 
 
    featured: 'false' 
 
    }]; 
 
}

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 

 
<div ng-app='app' ng-controller="MerchantListCtrl" ng-cloak> 
 
    <md-content class="md-padding" layout-xs="column" layout-gt-xs="row" layout-wrap flex> 
 
    <div flex-xs="100" layout-padding flex-gt-xs='50' flex-gt-md='33' layout="column" layout-align='center center' ng-repeat="merchant in merchants | filter: { featured: 'false' }" ng-show='merchants.length'> 
 
     <md-card flex='100' layout-fill> 
 
     <md-card-title> 
 
      <md-card-title-media> 
 
      <div class="md-media-lg card-media"> 
 
       img 
 
      </div> 
 
      </md-card-title-media> 
 
     </md-card-title> 
 
     <md-card-title> 
 
      <md-card-title-text> 
 
      <span class="md-headline">{{merchant.name | limitTo:27}}<span ng-if="merchant.name.length > 27">&hellip;</span></span> 
 
      <span class="md-subhead">Large</span> 
 
      </md-card-title-text> 
 
     </md-card-title> 
 
     </md-card> 
 
    </div> 
 
    </md-content> 
 
</div>