Question

我是从角度材料网站示例构建的，但添加了ng-repeat，列表很好并且响应迅速：

显示6个对象，因为后端服务器中有6个。

如果我调整大小，而不是通过一条线，它会缩小，这不是一件坏事：

如果我调整为5“PHONE格式，也可以：

现在，我从服务器后端获取了20个对象，Material不会自动传递每6个对象的一行，它不能正确显示。

所以，我已经尝试过这段代码了，但它不起作用，ng-if有效，但没有通过一行。：

<md-content class="md-padding" layout-xs="column" layout="row">
                                  <div  flex-xs flex-gt-xs="50" layout="column" class="flex" ng-repeat="j in juristes" ng-click="editerJuriste(j)" style="cursor:pointer">
                                    <md-card    ng-class="{yellow : j == selectedObject}" ng-click="selectItem(j); selectedIndex = 1;" class="md-card" style="cursor:pointer">
                                        <img ng-src="{{imagePath}}" class="md-card-image" alt="Washed Out"/>
                                        <md-card-title>
                                            <md-card-title-text>
                                            <span class="md-headline">{{ j.text }}</span>
                                            <span class="md-subhead">{{ j.ville }}</span>
                                            </md-card-title-text>
                                        </md-card-title>

                                        <md-card-content>
                                            <p>It is a <a href="#">long established fact</a> that a reader will be distracted by the readable content of a page when looking at its layout.</p>
                                            <h4>More Ipsums</h4>
                                            <p>The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
                                        </md-card-content>

                                        <md-card-actions layout="row" layout-align="end center">
                                          <md-button class="md-icon-button" aria-label="Favorite">
                                            <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
                                          </md-button>
                                          <md-button class="md-icon-button" aria-label="Settings">
                                            <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
                                          </md-button>
                                          <md-button class="md-icon-button" aria-label="Share">
                                            <md-icon md-svg-icon="img/icons/share-arrow.svg"></md-icon>
                                          </md-button>
                                        </md-card-actions>

                                    </md-card>

                                    <div  ng-if="($index + 1) % 3 == 0">test<div class='md-padding' layout="row" layout-wrap></div><br></div>
                                  </div>
                            </md-content>

有没有办法保持CSS行为，并插入一个分段符，每个6个对象？

非常感谢你，如果你知道这个问题，我在StackOverflow上尝试了一些解决方案，但它没有按预期工作。

编辑：只是为了让你看到它是如何使用的：我添加了一些对象：

Bootstrap会自动执行此操作，但我真的无法理解如何在具有材料的对象之间打破段落，请帮忙。

Answer 1

您可以通过将卡包装在一起来解决md卡包装问题。使用所需的弹性值重复该块（即对于5行，flex =“20”）。注意：它不会自动调整卡的高度。从代码笔网址编辑：https://codepen.io/anon/pen/MwzRde

angular.module('MyApp')
  .controller('AppCtrl', function($scope) {
    $scope.users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max'];
  });

.gridListdemoBasicUsage md-grid-list {
  margin: 8px;
}

.gridListdemoBasicUsage .gray {
  background: #f5f5f5;
}

.gridListdemoBasicUsage md-grid-tile {
  transition: all 400ms ease-out 50ms;
}

<html>

<head>
  <link rel="stylesheet prefetch" href="https://gitcdn.xyz/repo/angular/bower-material/v0.10.1-rc4/angular-material.css">
</head>

<body>
  <div ng-app="MyApp" class="gridListdemoBasicUsage" ng-controller="AppCtrl as appCtrl">

    <h1>User List</h1>
    <div class='md-padding' layout="row" layout-wrap>
      <div flex="20" ng-repeat="user in users">
        <md-card>
          <img src="http://placehold.it/150x150" class="md-card-image" alt="user avatar">
          <md-card-content>
            <h2>{{user}}</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
          </md-card-content>
          <div class="md-actions" layout="row" layout-align="end center">
            <md-button>Save</md-button>
            <md-button>View</md-button>
          </div>
        </md-card>
      </div>
    </div>
  </div>

  <script src="//static.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-messages.min.js"></script>
  <script src="https://gitcdn.xyz/repo/angular/bower-material/v0.10.1-rc4/angular-material.js"></script>
  <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
  <script>
    angular.module('MyApp')
      .controller('AppCtrl', function($scope) {
        $scope.users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max'];
      });
    //# sourceURL=pen.js
  </script>
</body>

</html>

角度材料：Md卡段打破重复

1 个答案: