模板数据显示篇

1：angular  

<div class="pointlist point" id="up{{i}}"(click)="onClick(i)" *ngFor="let list of balckSport; let i=index"
     [class.start]="i==0" [class.end]="i==balckSport.length-1">

    <nz-alert style="margin-left: 15px;margin-top: -70px;" nzType="error"
              nzMessage="{{list.counts}}次" *ngIf="list.counts!=0"></nz-alert>
    <i></i><span>{{list.name}}</span>

</div>

 

2:angular  js

 html:

<div class="row detail-row">
    <div class="col-md-12">
        <div class="detail-title">
            故障详情
        </div>
    </div>
    <div class="col-sm-2 col-md-2 detail-content" 
         ng-repeat="head in $ctrl.heads" ng-if="head.show===1"
         ng-init="data=$ctrl.detailData">   // 将js的东西，去给啦模板，当表格数据和详情数据一个api时，这种方法更好
        <div>
            (%head.chinese%)&nbsp:&nbsp(%data[head.field]%)
        </div>
    </div>
</div>
CSS：

.detail-row{
  border: solid 1px #dfdfdf;
  padding-bottom: 20px;
}
.detail-title {
  padding: 6px 12px;
  line-height: 18px;
  margin-left: -12px;
  margin-right: -12px;
  margin-bottom: 6px;
  border-radius: 0px;
  color: #555;
  background-color: #F5F5F5;
  border-color: #DDD;
}

.detail-content{
  padding-top: 10px;
  padding-bottom: 20px;
}

 

js:

ctrl.detailData=ret.body.data[0];
ctrl.heads=ret.head;

效果图