Material Design Lite table AngularJS 的刷新问题

Question

我正在使用 mdl-data-table mdl-js-data-table 和 ng-repeat 来实现一个简单的分页功能。它可以工作，但有一个恼人的问题：每当我翻页时，table 就会闪烁。例如如果 table 有 20 行并且每页有 10 行，mdl table 将首先显示 20，然后在十分之一秒内将其缩小为 10 行。

如果我删除 class mdl-data-table mdl-js-data-table 并只使用 table，一切正常，根本没有闪光.但是我当然失去了MDL风格。

我想知道 angular 和 MDL 是否都更新了 DOM，并且 MDL 以某种方式更新了 table 两次。但是我不知道去哪里修复它。调用 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>

Answer 1

MDL 适用于静态网站，不适用于网络应用程序。

考虑使用 Angular Material

Answer 2

我发现导致问题的原因是 mdl-data-table class 和背景颜色变化动画。所以我最终通过复制 material 设计 table 减去背景过渡的样式创建了一个新的 table class。这是 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-data-table替换为my-tableclass到table，虽然它实际上并没有修复 AngularJS 中的重复数据绑定，但它应该可以工作。

Answer 3

不要浪费时间建立 table。在 npm 和 bower

中使用 mdDataTable

Link: https://github.com/iamisti/mdDataTable

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

Material Design Lite table AngularJS 的刷新问题

Material Design Lite table refresh issue with AngularJS

angularjs

material-design-lite