如何在AngularJS中的GridList(动态切片)中使用换行符

时间:2016-04-12 10:01:46

标签: javascript html angularjs

我在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>标记,但它无效

3 个答案:

答案 0 :(得分:3)

经过大量搜索后我终于找到了答案,实际上我的一位朋友帮助了我。我只需要使用<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>

答案 1 :(得分:3)

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

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

答案 2 :(得分:0)

我建议你把变量放到像这样的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>