angular的表格ng-table结合ng-attr-title，ng-class，data-icon的用法

首先说明，这是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:红色圈中的为修改后标红的字段信息