如何使用ajax / json填充ng表,包括“选择”过滤器?
Plunk showing the problem: http://plnkr.co/Zn09LV
详情
我正在努力掌握AngualrJS和ng表扩展,尽管我可以使用工作过滤器获取一些漂亮的表,当我使用javascript中定义的静态数据时,一旦我尝试将实际数据加载到桌子我打了一个钩子.
ng表的主体正确填充,只要我只使用文本过滤器,一切似乎都在工作:
<td data-title="'Name'" filter="{ 'Name': 'text' }" sortable="'Name'"> {{user.Name}} </td>
工作很好
但是,如果我更新此选项以使用选择过滤器:
<td data-title="'Name'" filter="{ 'Name': 'select' }" sortable="'Name'" filter-data="Names($column)"> {{user.Name}} </td>
我遇到了一个syncronisation问题,因为在变量从服务器返回数据之前总是被评估. (可能在对服务器的请求发送之前,可以评估Names varibale).这意味着我得到一个空列表.
一旦数据从服务器返回 – 我似乎找不到更新选择过滤器的方法.重新运行创建过滤器列表的代码最初似乎没有效果 – 我不知道如何触发ng表重新检查其过滤器,以便更新的变量不被读取.
我也无法想出推迟变量评估的方法,直到异步调用完成.
对于我的javascript,我几乎使用了ng表格GitHub页面中的示例ajax代码,并将其添加到选择过滤器的示例代码.
$scope.tableParams = new ngTableParams({ page: 1,// show first page count: 10,// count per page sorting: { name: 'asc' // initial sorting } },{ total: 0,// length of data getData: function($defer,params) { // ajax request to api Api.get(params.url(),function(data) { $timeout(function() { // update table params var orderedData = params.sorting ? $filter('orderBy')(data.result,params.orderBy()) : data.result; orderedData = params.filter ? $filter('filter')(orderedData,params.filter()) : orderedData; $scope.users = orderedData.slice((params.page() - 1) * params.count(),params.page() * params.count()); params.total(orderedData.length); // set total for recalc pagination $defer.resolve($scope.users); },500); }); } }); var inArray = Array.prototype.indexOf ? function (val,arr) { return arr.indexOf(val) } : function (val,arr) { var i = arr.length; while (i--) { if (arr[i] === val) return i; } return -1 }; $scope.names = function(column) { var def = $q.defer(),arr = [],names = []; angular.forEach(data,function(item){ if (inArray(item.name,arr) === -1) { arr.push(item.name); names.push({ 'id': item.name,'title': item.name }); } }); def.resolve(names); return def; };
我尝试了一些额外的$q.defer()和尝试添加$scope.names函数的初始数据,但我对promise和延迟的理解不够强大,无法使任何工作.
有几个关于GitHub的注释表明这是ng表中的一个bug,但我不知道是否是这种情况,或者我只是在做某事.
https://github.com/esvit/ng-table/issues/186
指针如何程序非常感激
-Kaine-
解决方法
但是我发现一个解决方案,我认为是非常好的.首先,您需要覆盖ngTable选择过滤器模板(如果您不知道如何执行此操作,则涉及使用$templateCache,并且需要覆盖的密钥为’ng-table / filters / select.html’).
在正常的模板中,您会发现像ng-options =“data.id as data.title for data in $column.data”,问题在于$column.data是一个固定的值,当我们更新$scope.filterOptions时,t更改.
我的解决方案是只传递$scope键作为过滤器数据,而不是传递整个选项列表.所以,而不是filter-data =“filterOptions”,我会传递filter-data =“’filterOptions”,然后在模板中放一个小的改变,如:ng-options =“data.id as data.title for data.title for {{$column.data}}中的数据.
显然,这是选择过滤器如何工作的重大变化.在我的情况下,这是一个非常小的应用程序,只有一个表,但你可能会担心这样的改变会打破你的其他选择.如果是这样,您可能希望将此解决方案构建到自定义过滤器中,而不是仅仅覆盖“选择”.