рд╕рд░реНрд╡рд░ рд╕реЗ рдбреЗрдЯрд╛ рд▓реЛрдб рдХрд░рддреЗ рд╕рдордп, рд╣рдореЗрд╢рд╛ рдХрдИ рд╕реЗрдХрдВрдб рдкреНрд░рддреАрдХреНрд╖рд╛ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ, рдФрд░ рд╡рд╣рд╛рдВ рдЦрд╛рд▓реА рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ, рддреЛ рдХреНрдпрд╛ рд▓реЛрдбрд┐рдВрдЧ рдЯреЗрдХреНрд╕реНрдЯ рджрд┐рдЦрд╛рдиреЗ рдХрд╛ рдХреЛрдИ рдЖрд╕рд╛рди рддрд░реАрдХрд╛ рд╣реИ?
+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; }
}
рдХреЛрдИ рдФрд░ рдХрд╛рдо рдирд╣реАрдВред
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдХреНрдпрд╛ рдЖрдк рдлрд╝рд┐рд▓реНрдЯрд░ рд╡рд┐рд▓рдВрдм рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХрд░рддреЗ рд╣реИрдВ?
рдпрджрд┐ рд╕рд░реНрд╡рд░ рд╕реЗ рдбреЗрдЯрд╛ рдкреБрдирд░реНрдкреНрд░рд╛рдкреНрдд рдХрд░рддреЗ рд╕рдордп рдпрд╣ рдХреЗрд╡рд▓ рдПрдХ рд▓реЛрдбрд┐рдВрдЧ рдкреНрд░рднрд╛рд╡ рд╣реИ, рддреЛ рдЖрдк getData() рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдХреЙрд▓ рдХрд░рддреЗ рд╕рдордп рд▓реЛрдбрд┐рдВрдЧ рдмреВрд▓рд┐рдпрди рд╕реЗрдЯ рдХреЗ рд╕рд╛рде ngAnimate рдФрд░ css рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:
рдФрд░ рдлрд┐рд░ рдЯреЗрдмрд▓ рдкрд░ рдПрдХ рд╕реАрдПрд╕рдПрд╕ рдХреНрд▓рд╛рд╕ рдЬреЛрдбрд╝реЗрдВ:
рдФрд░ рд╕реАрдПрд╕рдПрд╕ рдореЗрдВ рдЗрд╕рдХреЗ рд░рд┐рд╢реНрддреЗрджрд╛рд░: