Raa*_*ood 5 javascript angularjs angular-resource ngtable
我开始使用ngTable的现有示例,并使用ngResource对其进行了一些修改.使用资源工厂,它填充数据,但搜索和排序不起作用.
http://codepen.io/anon/pen/yVGKMZ
在上面创建了一支笔.
var app = angular.module("myApp", ["ngTable", "ngResource", "ngTableDemoFakeBackend"]);
app.factory('orderResource', function ($resource) {
return $resource('https://jsonplaceholder.typicode.com/posts');
});
(function () {
app.controller("demoController", demoController);
demoController.$inject = ["NgTableParams", "$resource", "orderResource"];
function demoController(NgTableParams, $resource, orderResource) {
//debugger;
var ordersGet = orderResource.query({ });
var Api = $resource("/data");
this.tableParams = new NgTableParams({}, {
getData: function (params) {
// **** Section 1 *** sorting and filter does not work
return ordersGet.$promise.then(function (response) {
params.total(100);
return response;
// **** Section 1 ***
//****Section 2 *** this works fine
// return Api.get(params.url()).$promise.then(function(data) {
// params.total(data.inlineCount);
// return data.results;
//****Section 2 ***
});
}
});
}
})();Run Code Online (Sandbox Code Playgroud)
<div ng-app="myApp">
<div ng-controller="demoController as demo">
<table ng-table="demo.tableParams" class="table table-bordered table-striped table-condensed">
<tr ng-repeat="row in $data track by row.id">
<td data-title="'iss'" filter="{id: 'number'}" sortable="'id'">{{row.id}}</td>
</tr>
</table>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
在代码中,如果您评论第1部分和取消评论部分2,您可以观察它是否有效.我也试过简单的$ http它没有用.
如果我使用不同的 api,Angular Table 排序将不起作用
我在其他地方问了同样的问题并得到了更好的答案。
首先,我们缺少过滤。
return $filter('filter')($filter('orderBy')(data, params.orderBy()),params.filter());
Run Code Online (Sandbox Code Playgroud)
为了进行排序,我们必须添加一些逻辑来删除具有空过滤器值的属性。
工作代码笔在这里
http://codepen.io/anon/pen/rWRNjQ
| 归档时间: |
|
| 查看次数: |
1142 次 |
| 最近记录: |