ng-table使用笔记-遇到的问题及解决方案

本文链接：https://blog.youkuaiyun.com/JaneLittle/article/details/61200731

ngTable 是 AngularJS 表格指令，项目中有时候会用到表格，若是项目不用angularJS，之前用js循环生成表格的方法不算复杂，但是若是引用了angularJS的话，表格使用ngTable 却更方便。
项目中初次使用ngTable时候，博主和队友遇到了一些问题，今天总算有些时间总结记录一下，以免以后再跳坑。也希望对大家有所帮助。

先看官方demo（地址：http://ng-table.com/#/）,从官方demo中可以看到，要先引用 angular.js 和 ng-table.min.js ，在声明应用模块的时候，也要添加 ngTable：

var myApp = angular.module('myApp',['ngTable']);

以上都是最基础的配置。看起来确实不复杂，但是博主和队友却屡次跳坑。先来看一段代码：

<table ng-table="warnList" show-filter="false">
       <tr ng-repeat="warns in $data | filter:proNameFil" class="warnTr">
           <td data-title="'名称'" sortable="'warnName'"><a href="#/editWarn/{{warns.ruleId}}">{{warns.ruleName}}</a></td>
           <td data-title="'适用项目'" class="b_l" sortable="'applyPro'">
               <span ng-repeat="y in warns.itemList">{{y.ITEM_NAME}}<em>/</em></span>
           </td>
           <td data-title="'状态'">
               <span ng-if="warns.activity == 1" class="cp" ng-click="stateCut($event)">启用</span>
           </td>
           <td data-title="'操作'"><span data-id="{{warns.ruleId}}" ng-click="warnDel($event)">删除</span></td>
       </tr>
   </table>

从这段代码可以看到的：
1、为表格提供的数组是 warnList
这里写图片描述

2、没有应用过滤功能（不写这句话也行，默认值是false）
这里写图片描述

3、有的列使用了排序功能
这里写图片描述

那么我们都跳过哪些坑呢？有技术的也有非技术的
1、报错：Error: [$injector:itkn]
我们这个问题的原因是在另外一个页面的controller中忘了引入NgTableParams

angular.module('myApp.wController',["ngTable"])
.controller('wConfig',['NgTableParams'],function (NgTableParams) {

})

2、报错：TypeError: t.reload is not a function
这里写图片描述
出现这个问题的原因并不是唯一的，我自己遇到这个问题是因为在给循环的数组加载数据之前定义了一个空数组，然后HTML在加载数据的时候还没完全执行加载数据的函数，导致取不到数据，所以报这个错。

你已经猜到这个问题的解决办法了对不对？没错，只要把那个初始定义的空数组注释就行了（请注意第一行）：

// $scope.warnList = [];//数据集合
var succCallBack = function(res) {
	var data = res.data.rule;
	if (data) {
		$scope.warnList = res.data.rule;
	}
}
var errCallBack = function (res) {
};
dataService.go(dataService.interfaces.getSeleList,dataService.methods.get,param,succCallBack,errCallBack);

这个问题解决了，看起来是没什么问题了。在一个模块的代码写好之后，其他模块就可以直接拿过来用，直接改一下名字就行了，这也是提高效率的方法之一。但是一个同事（我是前端，他是后台Java）在复制了我的代码之后，却还是报错，在对着官网demo仔细比照了一番，检查了js、HTML之后还是没发现有什么问题，也没什么不一样。在他打算重写的时候，博主发现了HTML中的一个小问题，后来试了一下，正是这个“小问题”引发了一系列大问题：

<table ng-table="warnList" show-filter="false">
       <tr ng-repeat="warns in $data | filter:proNameFil" class="warnTr">
           <td data-title="'名称'" sortable="'warnName"><a href="#/editWarn/{{warns.ruleId}}">{{warns.ruleName}}</a></td>
           <td data-title="'适用项目'" class="b_l" sortable="'applyPro'">
               <span ng-repeat="y in warns.itemList">{{y.ITEM_NAME}}<em>/</em></span>
           </td>
       </tr>
   </table>

不知道你们发现了这个问题没有：
这里写图片描述
我那可爱的队友在设置 sortable 值的时候，不小心删掉了双引号里面的一个单引号！写代码的人都知道，代码里的一个符号都不能少：
sortable="‘warnName’"这个双引号表示是sortable的值，而里面的单引号是’warnName’这个字符串，也是必不可少的。

然而有个在上海的team小组成员（博主当时在北京）也是第一次使用ngTable,就直接复制了博主写好的代码直接用，他自己反复检查，觉得和我写的一模一样了，还是报错，后来不得已才给我发了 js代码的截图问我怎么回事，我也觉得他的 js 写的没什么问题，就让他发过来HTML代码，后来经过一番检查才发现：就是因为和我写的一模一样才会报错的，他在HTML中的数组名字和在 js 中的名字不一致（复制了HTML忘了改名字了！！/笑哭、笑哭）
这里写图片描述