Javascript 如何从ng表中定义筛选器框?
全部 我按照的说明在ng表中创建一个过滤器框 我的代码与示例相同: 在html中创建筛选器:Javascript 如何从ng表中定义筛选器框?,javascript,angularjs,ngtable,self-referencing-table,Javascript,Angularjs,Ngtable,Self Referencing Table,全部 我按照的说明在ng表中创建一个过滤器框 我的代码与示例相同: 在html中创建筛选器: <table ng-table="tableParams" show-filter="true" class="table"> <tr ng-repeat="user in $data"> <td data-title="'Name'" filter="{ 'name': 'text' }"> 现在我们可以看到布局: 但我不希望表中的过
<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" filter="{ 'name': 'text' }">
现在我们可以看到布局:
但我不希望表中的过滤器框,如下所示:
文件管理器在桌子上方
过滤器盒的我的代码:
<input type="text" ng-model="filter.name" />
<table ng-table="tableParams" show-filter="false" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" filter="{ 'name': 'text' }">
{{user.name}}
</td>
{{user.name}
。。。使用ng model=“filter.name”绑定,但它不起作用
有什么方法可以实现我的想象力吗?你可以这样做:
ng型号
文本框的属性应该是您需要在其上
过滤数据。因此,此文本框可以放置在页面中的任何位置
<input type="text" ng-model="name" />
<table>
<th>Item Name</th>
<th>Item Price</th>
<tr ng-repeat="item in items|filter:name">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</table>
<input type="text" ng-model="name" />
项目名称
项目价格
{{item.name}
{{item.price}}
帕姆错了。您不应该在ngtable或任何已经完成筛选的组件之后进行筛选。否则,你会有意想不到的事情
只需修改您的表参数并按ref绑定筛选对象:
$scope.filter = {name: 'T'};
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
filter: $scope.filter
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.filter() ?
$filter('filter')(data, params.filter()) :
data;
$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);
}
});
并移除tr中的过滤材料
<input type="text" ng-model="filter.name"/>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" >
{{user.name}}
</td>
<td data-title="'Age'">
{{user.age}}
</td>
</tr>
</table>
{{user.name}
{{user.age}
通过这种方式,数据在重新加载时过滤,而不是在数据显示时过滤。您的$scope.filter绑定在UI上,并且$scope.filter由ngTable监视
我试图按照@Clems的答案回答,但没有成功。做了一些研究后,我从中找到了一个解决方案,还有一个更简单的解决方案
<input type="text" ng-model="tableParams.filter()['name']" />
<table ng-table="tableParams" show-filter="false" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" filter="{ 'name': 'text' }">
{{user.name}}
</td>
</tr>
</table>
{{user.name}
尽管唯一的问题(我现在正试图找出)是如何用一个输入过滤多个列。希望这有帮助这是个坏主意,尤其是对于使用getData
函数的人来说。你也可以参考这个链接。你是救命恩人。我找到的ng表中自定义过滤器输入的最佳实现。
<input type="text" ng-model="tableParams.filter()['name']" />
<table ng-table="tableParams" show-filter="false" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" filter="{ 'name': 'text' }">
{{user.name}}
</td>
</tr>
</table>