首先说明,这是angular的表格ng-table代码结构
1.在ngTab中想用title标签展示的提示信息只能是静态的,若想动态赋值,则可以用ng-attr-title,代码如下:
<td data-title="'开始时间'" ng-attr-title="{{row.tag.plan_dev_time}}" data-sortable="'plan_dev_time'" ng-class="{iconStyle : row.tag.plan_dev_time!=null }" data-icon="" ng-bind="row.plan_dev_time | date:'yyyy-MM-dd'" ng-click="editValue(pcbPro.editCustomLine,'childVersion','计划开发开始时间','plan_dev_time',row)"
style="min-width: 130px"></td>
2.ng-class结合data-icon标准修改字段:
data-icon="*"这种用法可以直接在指定字段前添加上*,为了区分字段是否修改过,只需要在修改过的字段前添加* ,所以这里结合ng-class实现动态添加;
style里的样式对应ng-class中的样式调用,将icon的内容设置为‘*’(初始值为空),颜色设置为红色;
这里展示ng-class的一种用法:ng-class="{iconStyle : row.tag.plan_dev_time!=null }" ,当row.tag.plan_dev_time!=null 不为空时调用.iconStyle 里面的样式。这里可以添加多个判断条件,每个判断条件之间用逗号隔开,如:ng-class="{iconStyle : row.tag.plan_dev_time!=null , 样式2 : 条件2}"
<style>
.iconStyle::after{
color: red;
content:'*';
}
</style>
<td data-title="'开始时间'" ng-attr-title="{{row.tag.plan_dev_time}}" data-sortable="'plan_dev_time'" ng-class="{iconStyle : row.tag.plan_dev_time!=null }" data-icon="" ng-bind="row.plan_dev_time | date:'yyyy-MM-dd'" ng-click="editValue(pcbPro.editCustomLine,'childVersion','计划开发开始时间','plan_dev_time',row)"
style="min-width: 130px"></td>
3.以下展示的为该块的完整代码:
<style>
.iconStyle::after{
color: red;
content:'*';
}
</style>
<div class="panel panel-default">
<div class="panel-body">
<div class="well col-md-12">
<table ng-table="versionDatas.tableParams" style="display: block; width: 100%; table-layout: fixed;overflow-x: auto;word-break: keep-all;" class="table table-striped table-condensed table-hover">
<tbody>
<tr ng-repeat="row in $data">
<td data-title="'编码'" data-sortable="'num'" ng-bind="row.num" style="min-width: 130px"></td>
<td data-title="'名称'" title="名称" data-sortable="'mane'" ng-bind="row.num" style="min-width: 130px"></td>
<td data-title="'开始时间'" ng-attr-title="{{row.tag.plan_dev_time}}" data-sortable="'plan_dev_time'" ng-class="{iconStyle : row.tag.plan_dev_time!=null }" data-icon="" ng-bind="row.plan_dev_time | date:'yyyy-MM-dd'" ng-click="editValue(pcbPro.editCustomLine,'childVersion','开始时间','plan_dev_time',row)"
style="min-width: 130px"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
4.上图:
ng-attr-title:鼠标放到相应的添加了标签的字段上时会自动展示提示信息,提示信息为动态赋值信息,可提前设置好展示格式
data-icon:红色圈中的为修改后标红的字段信息