Ng-table: рд▓реЛрдб рд╣реЛ рд░рд╣рд╛ рд╣реИ рдкреНрд░рднрд╛рд╡

рдХреЛ рдирд┐рд░реНрдорд┐рдд 14 рдЕрдХреНрддреВре░ 2015  ┬╖  8рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: esvit/ng-table

рд╕рд░реНрд╡рд░ рд╕реЗ рдбреЗрдЯрд╛ рд▓реЛрдб рдХрд░рддреЗ рд╕рдордп, рд╣рдореЗрд╢рд╛ рдХрдИ рд╕реЗрдХрдВрдб рдкреНрд░рддреАрдХреНрд╖рд╛ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ, рдФрд░ рд╡рд╣рд╛рдВ рдЦрд╛рд▓реА рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ, рддреЛ рдХреНрдпрд╛ рд▓реЛрдбрд┐рдВрдЧ рдЯреЗрдХреНрд╕реНрдЯ рджрд┐рдЦрд╛рдиреЗ рдХрд╛ рдХреЛрдИ рдЖрд╕рд╛рди рддрд░реАрдХрд╛ рд╣реИ?

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдХреНрдпрд╛ рдЖрдк рдлрд╝рд┐рд▓реНрдЯрд░ рд╡рд┐рд▓рдВрдм рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХрд░рддреЗ рд╣реИрдВ?

рдпрджрд┐ рд╕рд░реНрд╡рд░ рд╕реЗ рдбреЗрдЯрд╛ рдкреБрдирд░реНрдкреНрд░рд╛рдкреНрдд рдХрд░рддреЗ рд╕рдордп рдпрд╣ рдХреЗрд╡рд▓ рдПрдХ рд▓реЛрдбрд┐рдВрдЧ рдкреНрд░рднрд╛рд╡ рд╣реИ, рддреЛ рдЖрдк getData() рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдХреЙрд▓ рдХрд░рддреЗ рд╕рдордп рд▓реЛрдбрд┐рдВрдЧ рдмреВрд▓рд┐рдпрди рд╕реЗрдЯ рдХреЗ рд╕рд╛рде ngAnimate рдФрд░ css рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:

settings.getData = function (params: ng.ngtable.ITableParams): ng.IPromise<Array<T>> {
                    self.isLoading = true;
                    return self.itemsFunction(self.specification).then((result: IGridItemWrapper<T>): Array<T> => {
                        self.setItems(result.Items);
                        self.isLoading = false;
                        params.total(result.Count);
                        return result.Items;
                    }).catch((error) => {
                        self.isLoading = false;
                    });
};

рдФрд░ рдлрд┐рд░ рдЯреЗрдмрд▓ рдкрд░ рдПрдХ рд╕реАрдПрд╕рдПрд╕ рдХреНрд▓рд╛рд╕ рдЬреЛрдбрд╝реЗрдВ:

<table ng-table="plc.tableParams" ng-class="{'loading': plc.isLoading}">

рдФрд░ рд╕реАрдПрд╕рдПрд╕ рдореЗрдВ рдЗрд╕рдХреЗ рд░рд┐рд╢реНрддреЗрджрд╛рд░:

.loading-remove {
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.loading,
.loading-add.loading-add-active {
    opacity: 0.5;
    //animation: blinker 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
.loading-remove.loading-remove-active {
    opacity: 1;
}
<strong i="13">@keyframes</strong> blinker {  
    from { opacity: 1; }
    to { opacity: 0.5; }
}

рд╕рднреА 8 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

+1, рдпрд╣ рд╕реБрд╡рд┐рдзрд╛ рднреА рдЪрд╛рд╣рддреЗ рд╣реИрдВред

+1

+1

+1

+1

рдбреЗрдЯрд╛ рд▓реЛрдб рдХрд░рддреЗ рд╕рдордп рдореИрдВ рдЕрдЯрдХрд╛ рд╣реБрдЖ рдорд╣рд╕реВрд╕ рдХрд░рддрд╛ рд╣реВрдВред рдХреНрдпрд╛ рдХреЛрдИ рд╕рдорд╛рдзрд╛рди рд╣реИ?

рдХреНрдпрд╛ рдЖрдк рдлрд╝рд┐рд▓реНрдЯрд░ рд╡рд┐рд▓рдВрдм рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХрд░рддреЗ рд╣реИрдВ?

рдпрджрд┐ рд╕рд░реНрд╡рд░ рд╕реЗ рдбреЗрдЯрд╛ рдкреБрдирд░реНрдкреНрд░рд╛рдкреНрдд рдХрд░рддреЗ рд╕рдордп рдпрд╣ рдХреЗрд╡рд▓ рдПрдХ рд▓реЛрдбрд┐рдВрдЧ рдкреНрд░рднрд╛рд╡ рд╣реИ, рддреЛ рдЖрдк getData() рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдХреЙрд▓ рдХрд░рддреЗ рд╕рдордп рд▓реЛрдбрд┐рдВрдЧ рдмреВрд▓рд┐рдпрди рд╕реЗрдЯ рдХреЗ рд╕рд╛рде ngAnimate рдФрд░ css рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:

settings.getData = function (params: ng.ngtable.ITableParams): ng.IPromise<Array<T>> {
                    self.isLoading = true;
                    return self.itemsFunction(self.specification).then((result: IGridItemWrapper<T>): Array<T> => {
                        self.setItems(result.Items);
                        self.isLoading = false;
                        params.total(result.Count);
                        return result.Items;
                    }).catch((error) => {
                        self.isLoading = false;
                    });
};

рдФрд░ рдлрд┐рд░ рдЯреЗрдмрд▓ рдкрд░ рдПрдХ рд╕реАрдПрд╕рдПрд╕ рдХреНрд▓рд╛рд╕ рдЬреЛрдбрд╝реЗрдВ:

<table ng-table="plc.tableParams" ng-class="{'loading': plc.isLoading}">

рдФрд░ рд╕реАрдПрд╕рдПрд╕ рдореЗрдВ рдЗрд╕рдХреЗ рд░рд┐рд╢реНрддреЗрджрд╛рд░:

.loading-remove {
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.loading,
.loading-add.loading-add-active {
    opacity: 0.5;
    //animation: blinker 0.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
.loading-remove.loading-remove-active {
    opacity: 1;
}
<strong i="13">@keyframes</strong> blinker {  
    from { opacity: 1; }
    to { opacity: 0.5; }
}

рдХреЛрдИ рдФрд░ рдХрд╛рдо рдирд╣реАрдВред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕