ngTable動態更新的三種方式

2022-08-29 19:48:08 字數 2090 閱讀 3727

ngtable動態更新的三種方式

前言**是html中常見的表現形式,當我們用angularjs做前端開發時,我可以選擇用ngtable的開源元件。ngtable已經為了我們封裝了常用的**操作,節省我們大量的開發時間。

本文將介紹如何動態更新**,分為3種方式:1. 前端更新, 2. ajax更新, 3. websocket更新。

ngtable介紹

ngtable是乙個基於angularjs的directive設計乙個**專案,支援基本的**操作,分頁,排序,非同步載入等功能。

前端更新

前端更新,是指在angularjs中,通過js計算,更新**中的資料。

1、建立資料夾frontupdate

2、在資料夾frontupdate中分別建立檔案package.json、bower.json

package.json

, "scripts":

bower.json}}

}

'use strict';

($scope),

];setinterval(

function

(),

];console.log($scope.users[0]);

},2000);

}]);

6、安裝依賴包: npm install

7、啟動http-server: npm start ,在瀏覽器中輸入http://

ajax更新

ajax更新,是指通過ajax取資料,更新**中的內容。

在剛才2個檔案上面增加內容:

mytable.js: 實現指令碼

ngtable.json:json資料檔案

新加新**: ng-controller=」table2ctrl」}}

}}

增加新controller: table2ctrl

]開啟瀏覽器,看到效果

通過ajax,等待3秒後,實現對ngtable的更新。

webscoket更新

1、新建資料夾:webscoketupdate

2:、拷貝前面的 package.json、bower.json過來

3、修改package.json,引入express、ejs、socket.io

, "scripts":

var express = require('express')

, path = require('path')

, ejs = require('ejs')

, io = require('socket.io').listen(server);

io.on('connection', function

(socket) ,

];socket.emit('ngtablesocket', users);

},2000);

});};

//todo

};(req, res));

() );

6、增加檔案:views/ngtable.html}}

var socket = io.connect("localhost");

function

table3ctrl($scope),

];socket.on('ngtablesocket', function

(data) );

}8、安裝依賴包: npm install

9、啟動node:

執行緒的三種建立方

一,繼承thread 重寫run class programmer extends thread public static void main string args 二,繼承runnable 實現run class programmer implements runnable public st...

VMware ESXi Vlan的三種實現方式

在vmware esx esxi網路中vlan實現方式可以分成3種,分別是通過物理交換機,虛擬交換機 vswitch 和esxi中的虛擬機器 vm 來新增vlan標記,具體方式如下 1 est external switch tagging 通過將交換機的埠劃分到不同的vlan實現虛擬機器的vlan...

Python selenium的三種等待方式

time.sleep 3 這種方式簡單粗暴,必須等xx時間,不管你瀏覽器是否載入完了,程式都得等3秒,然後繼續執行下面的 太死板,嚴重影響程式的執行速度。可以作為除錯用,有時 裡面也這樣用。implicitly wait xx 設定乙個最長等待時間,如果在規定時間內網頁載入完成,則執行下一步,否則一...