ngTable动态更新的三种方式

最新推荐文章于 2018-04-19 14:53:53 发布

lxhjh

最新推荐文章于 2018-04-19 14:53:53 发布

阅读量6.7k

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/lxhjh/article/details/50614431

版权

本文介绍了在AngularJS开发中使用ngTable组件进行表格动态更新的三种方法：前端更新、Ajax更新和WebSocket更新。通过前端更新直接操作数据，Ajax从服务器获取新数据，以及WebSocket实现实时数据同步。

摘要由CSDN通过智能技术生成

前言

表格是HTML中常见的表现形式，当我们用AngularJS做前端开发时，我可以选择用ngTable的开源组件。ngTable已经为了我们封装了常用的表格操作，节省我们大量的开发时间。

本文将介绍如何动态更新表格，分为3种方式：1. 前端更新, 2. Ajax更新, 3. websocket更新。

ngTable介绍

ngTable是一个基于AngularJS的directive设计一个表格项目，支持基本的表格操作，分页，排序，异步加载等功能。

项目地址：https://github.com/esvit/ng-table

前端更新

前端更新，是指在AngularJS中，通过JS计算，更新表格中的数据。

1、建立文件夹FrontUpdate

2、在文件夹FrontUpdate中分别建立文件package.json、bower.json

package.json

{
  "version": "0.0.0",
  "private": true,
  "name": "frontUpdate-ngTable",
  "description": "AngularJS前端更新ngTable",
  "repository": "",
  "license": "MIT",
  "devDependencies": {
    "bower": "^1.3.1",
    "http-server": "^0.6.1",
    "karma": "^0.12.16",
    "karma-chrome-launcher": "^0.1.4",
    "karma-firefox-launcher": "^0.1.3",
    "karma-jasmine": "~0.1.0",
    "protractor": "^2.1.0",
    "shelljs": "^0.2.6",
    "tmp": "0.0.23"
  },
  "scripts": {
    "postinstall": "bower install",
    "prestart": "npm install",
    "start": "http-server -a 0.0.0.0 -p 8000",
    "pretest": "npm install",
    "test": "node node_modules/karma/bin/karma start test/karma.conf.js",
    "test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js  --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor test/protractor-conf.js",
    "update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/, '//@@NG_LOADER_START@@\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//@@NG_LOADER_END@@', 'app/index-async.html');\""
  }
}

bower.json

{
  "name": "frontUpdate-ngTable",
  "description": "AngularJS前端更新ngTable",
  "version": "0.0.0",
  "homepage": "",
  "license": "MIT",
  "private": true,
  "dependencies": {