材料设计精简版表刷新问题与AngularJS

问题描述：

我使用MDL-数据表MDL-JS-数据表和NG-重复实现一个简单的分页功能。它工作，但有一个恼人的问题：每当我翻页，表闪烁。例如如果表格有20行，每页有10行，那么mdl表格将首先显示20，然后在十分之一秒内将其收缩为10行。材料设计精简版表刷新问题与AngularJS

如果我删除类MDL-数据表MDL-JS-数据表，只是用表，一切正常，没有闪光灯在所有。但我当然失去了MDL风格。

我不知道如果这两个角和MDL更新DOM，并以某种方式MDL更新表的两倍。但我不知道要在哪里解决问题。调用mdl window.componentHandler.upgradeAllRegistered（）;似乎并不重要。

请帮忙。谢谢。代码的

部分如下。 initData函数只是为分页变量和数据数组设置初始值。

<div ng-init="initData()"></div> 
<table class="mdl-data-table mdl-js-data-table mdl-data-table__cell--non-numeric"> 
    <thead> 
     <tr> 
      <th>Name</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="n in datalists | pagination: curPage * pageSize | limitTo: pageSize" ng-controller="VhlCtrl"> 
      <td>{{$index}}</td> 
     </tr> 
    </tbody> 
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button" ng-disabled="curPage == 0" ng-click="curPage=curPage-1"> 
     <i class="material-icons">skip_previous</i> 
    </button> 
    Page {{curPage + 1}} of {{ numberOfPages() }} 
    <button class="mdl-button mdl-js-button mdl-button--icon mdl-button" ng-disabled="curPage >= datalists.length/pageSize - 1" ng-click="curPage = curPage+1"> 
     <i class="material-icons">skip_next</i> 
    </button> 
</table>

请分享一下你的代码，它是很难确定问题的确切原因无它。欢迎来到StackOverflow。 – plamut

答

MDL适用于静态网站，不适用于webapps。

考虑使用Angular Material

是的，这正是MDL所有者所说的。 Angular Material没有表格组件和导航栏组件。 –

答

我发现是什么原因造成的问题是MDL-数据表类和背景颜色变化的动画。所以我最终创建了一个新的表类，通过复制材质设计表的样式减去背景转换。这里是CSS：

.my-table { 
    position: relative; 
    border: 1px solid rgba(0, 0, 0, .12); 
    border-collapse: collapse; 
    font-size: 14px; 
    background-color: #ffffff; 
} 
.my-table th, td { 
    position: relative; 
    vertical-align: middle; 
    text-align: left; 
    text-overflow: ellipsis; 
    height: 48px; 
    box-sizing: border-box; 
    padding: 12px 12px 12px 18px; 
    border-top: 1px solid rgba(0, 0, 0, .12); 
    border-bottom: 1px solid rgba(0, 0, 0, .12); 
} 
.my-table th { 
    font-size: 12px; 
    color: rgba(0, 0, 0, .54); 
    font-weight: bold; 
}

更换MDL-数据表与我的表级表，但它实际上没有固定的重复数据绑定在AngularJS，它应该工作。

答

不要浪费你的时间建立你的表。使用mdDataTable在NPM和凉亭可供

链接：https://github.com/iamisti/mdDataTable

这里是它的演示：http://iamisti.github.io/mdDataTable/

材料设计精简版表刷新问题与AngularJS

相关推荐