如何按列筛选 table?
how can I filter a table by column?
我正在尝试按列过滤 table,这是 table:
<tr ng-repeat="row in rowCollection | filter: { person.lastName : lastName}">
<td>{{row.person.firstName}}</td>
<td>{{row.person.lastName}}</td>
<td>{{row.person.birthDate | date:'shortDate'}}</td>
<td>{{row.person.balance}}</td>
<td>{{row.person.email}}</td>
</tr>
数据如下所示:
$scope.rowCollection = [
{person:{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'}},
{person:{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'}},
{person:{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}}
];
在这种情况下,如何按列过滤姓氏?当 json 超过 1 级时,我无法让它工作。
plunkr:http://plnkr.co/edit/AFSoGw?p=preview
刚好有,
ng-repeat="row in rowCollection | filter: lastName"
它将根据用户给定的值过滤您的完整数组。
您应该将该级别添加到搜索查询的模型中,因此查询输入的 ng-model
应该是 person.lastName
filter on lastname: <input type="text" ng-model="person.lastName">
<h3>Basic Smart-Table Starter</h3>
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | filter: {'person':person}">
<td>{{row.person.firstName}}</td>
<td>{{row.person.lastName}}</td>
<td>{{row.person.birthDate | date:'shortDate'}}</td>
<td>{{row.person.balance}}</td>
<td>{{row.person.email}}</td>
</tr>
</tbody>
</table>
查看此更新plunker
为了按 lastName
过滤,您只需更新过滤器调用以反映
<tr ng-repeat="row in rowCollection | filter:lastName">
这将通过 lastName
过滤 rowCollection
。
但是,如果您想对姓氏进行更严格的过滤,我相信您会希望为您的应用程序定义更精确的过滤器。像 filterByLastName
这样的东西,它将遍历项目并检查哪些项目的姓氏与该名称匹配。
大致如下;
.filter('filterByLastName', function () {
return function(items, lastName) {
var filtered = [];
if (lastName) {
for (var i = 0; i < items.length; i++) {
if (items[i].lastName === lastName) {
filtered.push[items[i]];
}
}
} else {
filtered = items;
}
return filtered;
}
})
希望对您有所帮助!
我正在尝试按列过滤 table,这是 table:
<tr ng-repeat="row in rowCollection | filter: { person.lastName : lastName}">
<td>{{row.person.firstName}}</td>
<td>{{row.person.lastName}}</td>
<td>{{row.person.birthDate | date:'shortDate'}}</td>
<td>{{row.person.balance}}</td>
<td>{{row.person.email}}</td>
</tr>
数据如下所示:
$scope.rowCollection = [
{person:{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'}},
{person:{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'}},
{person:{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}}
];
在这种情况下,如何按列过滤姓氏?当 json 超过 1 级时,我无法让它工作。 plunkr:http://plnkr.co/edit/AFSoGw?p=preview
刚好有,
ng-repeat="row in rowCollection | filter: lastName"
它将根据用户给定的值过滤您的完整数组。
您应该将该级别添加到搜索查询的模型中,因此查询输入的 ng-model
应该是 person.lastName
filter on lastname: <input type="text" ng-model="person.lastName">
<h3>Basic Smart-Table Starter</h3>
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection | filter: {'person':person}">
<td>{{row.person.firstName}}</td>
<td>{{row.person.lastName}}</td>
<td>{{row.person.birthDate | date:'shortDate'}}</td>
<td>{{row.person.balance}}</td>
<td>{{row.person.email}}</td>
</tr>
</tbody>
</table>
查看此更新plunker
为了按 lastName
过滤,您只需更新过滤器调用以反映
<tr ng-repeat="row in rowCollection | filter:lastName">
这将通过 lastName
过滤 rowCollection
。
但是,如果您想对姓氏进行更严格的过滤,我相信您会希望为您的应用程序定义更精确的过滤器。像 filterByLastName
这样的东西,它将遍历项目并检查哪些项目的姓氏与该名称匹配。
大致如下;
.filter('filterByLastName', function () {
return function(items, lastName) {
var filtered = [];
if (lastName) {
for (var i = 0; i < items.length; i++) {
if (items[i].lastName === lastName) {
filtered.push[items[i]];
}
}
} else {
filtered = items;
}
return filtered;
}
})
希望对您有所帮助!