Question

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

如果我删除类mdl-data-table mdl-js-data-table并只使用表，一切正常，根本没有闪存。但我当然失去了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>

Answer 1

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

考虑使用Angular Material

Answer 2

我发现造成问题的原因是 mdl-data-table 类和背景颜色更改动画。所以我最终通过复制材质设计表的样式减去背景过渡来创建一个新的表类。这是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-table 类到表，虽然它实际上并没有修复AngularJS中的重复数据绑定，但它应该可以正常工作。

Answer 3

不要浪费你的时间来建立你的桌子。使用npm和凉亭中的mdDataTable

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

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

AngularJS的Material Design Lite表刷新问题

3 个答案: