CODEWITHSUNDEEP
angularjsmaterial-design-lite
jay.m
jay.m

Reputation: 1628

Material Design Lite table refresh issue with AngularJS

I am using mdl-data-table mdl-js-data-table and ng-repeat to implement a simple pagination feature. It works, but has an annoying issue: whenever I turn a page, the table flashes. e.g. if the table has 20 rows and each page has 10, mdl table will first display 20 then within tenth of a second, shrink that into 10 rows.

If I remove class mdl-data-table mdl-js-data-table and just use table, everything works fine, no flash at all. But I lost MDL style of course.

I wonder if both angular and MDL updates DOM, and somehow MDL update the table twice. But I don't know where to look at to fix it. calling mdl window.componentHandler.upgradeAllRegistered(); doesn't seem matter one way or the other.

Please help. Thanks.

part of the code is as below. initData function just sets the initial value for pagination variables and data array.

<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>

Upvotes: 2

Views: 1263

Answers (3)

Iamisti
Iamisti

Reputation: 1710

Don't waste your time building up your table. Use mdDataTable available in npm and in bower

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

Here is the demo of it: http://iamisti.github.io/mdDataTable/

Upvotes: 0

solosodium
solosodium

Reputation: 733

I found what is causing the problem is the mdl-data-table class and the background color change animation. So I ended up creating a new table class by copying the style of the material design table minus the background transition. Here is the 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;
}

Replace mdl-data-table with my-table class to table, although it's not actually fixing the repeated data-binding in AngularJS, it should work.

Upvotes: 1

Pascal
Pascal

Reputation: 159

MDL is for static websites and not for webapps.

consider using Angular Material

Upvotes: 1

Related Questions