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>

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

Answer 1

我建议你像这样将变量放入 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>

Answer 2

搜索了很多终于找到了答案，其实是我的一个朋友帮忙 me.I 只需要使用 <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

对于那些使用 material.angular.io 的人来说，这有效

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

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

How to use line break in GridList(dynamic tiles) in AngularJS

html

javascript

angularjs

angularjs-material