Ng-table: ローディング効果

作成日 2015年10月14日  ·  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;
                    });
};

次に、テーブルにcssクラスを追加します。

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

およびcssでのその相対:

.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;
                    });
};

次に、テーブルにcssクラスを追加します。

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

およびcssでのその相対:

.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 評価

関連する問題

wayjake picture wayjake  ·  6コメント

penchiang picture penchiang  ·  5コメント

alienriquebm picture alienriquebm  ·  6コメント

ivyfae picture ivyfae  ·  12コメント

muhlegg picture muhlegg  ·  29コメント