Angular Material : Md-card 段落中断 ng-repeat答案

【问题标题】：Angular Material : Md-card paragraph break ng-repeatAngular Material : Md-card 段落中断 ng-repeat
【发布时间】：2020-04-04 17:25:12
【问题描述】：

我是从 angular Material 网站示例中构建的，但添加了一个 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 会自动执行此操作，但我真的不明白如何用材料在对象之间打断段落，请帮忙。

【问题讨论】：

你可以给每个重复的 div 16.666% 的宽度，而父级的宽度为 100%。
谢谢你，但它不会断行，转到第二段
你试过 ng-if="!($index%3)" 吗？
谢谢，NG-IF 工作正常，每次 3 次迭代都显示一些内容，但它不想通过
或任何我的东西传递一行（断段落）我试过了。使用引导程序，它可能会正常工作。真不知道怎么办，就好像Material不明白一排的物体太多了。
用这个 plunker 解决了我的问题：codepen.io/anon/pen/MwzRde

标签： javascript css angularjs angularjs-material

【解决方案1】：

您可以通过将卡片包装在 .使用所需的 flex 值重复该块（即 flex="20" 用于 5 行）。注意：它不会自动调整卡片高度。从代码笔 URL 编辑：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>

【讨论】：