提问人：user7370387 提问时间：6/16/2017 最后编辑：Edricuser7370387 更新时间：4/4/2020 访问量：1911
角度材料 ： Md-card 段落中断 ng-repeat
Angular Material : Md-card paragraph break ng-repeat
问：
我是从 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 会自动执行此操作，但我真的不明白如何用材料在对象之间中断段落，请帮忙。
答：
0赞
Rentering.com
4/5/2018
#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>
评论