javascript - 如何在AngularJS的GridList（动态图块）中使用换行符

Question

我在angularJS中使用网格列表（动态图块）并使用<br/>标签，但它不起作用

这是代码

<div ng-controller="gridListDemoCtrl as vm" flex="" ng-cloak="" class="gridListdemoDynamicTiles" ng-app="MyApp">
        <md-grid-list md-cols="1" md-cols-sm="2" md-cols-md="3" md-cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter="8px" md-gutter-gt-sm="4px">

            <md-grid-tile ng-repeat="tile in compData" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background">
                {{tile.systemName}}<br>
                {{tile.createduser}}

            </md-grid-tile>
        </md-grid-list>
    </div>

我<br>在 {{tile.systemName}} 之后使用标签，但它不起作用

Answer 1

对于那些使用 material.angular.io 的人来说，这是可行的

<mat-grid-tile>
   <mat-card-content>
       <h2>your title</h2>
       <h4>your content</h4>
    </mat-card-content>
</mat-grid-tile>

Answer 2

经过大量搜索，我终于找到了答案，实际上我的一个朋友帮助了我。我只需要使用<md-content>标签然后<br/>标签就在那里工作。

 <md-grid-tile ng-repeat="tile in compData" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background">
       <md-content>
        <br/>{{tile.systemName}}
        <br/>{{tile.createduser}}
       </md-content>
    </md-grid-tile>

Answer 3

我建议您将变量放入 div 中，如下所示：

<md-grid-tile ng-repeat="tile in compData" md-rowspan="{{tile.span.row}}" md-colspan="{{tile.span.col}}" md-colspan-sm="1" md-colspan-xs="1" ng-class="tile.background">
   <div>{{tile.systemName}}</div>
   <div>{{tile.createduser}}</div>
</md-grid-tile>