[英]Filter a Table with AngularJS
I just got into AngularJS and I'm trying to filter a table. 我刚接触AngularJS,正在尝试过滤表。 So far I create my table dynamically, which works fine.
到目前为止,我已经动态创建了我的表,效果很好。
HTML: HTML:
<div ng-app="tableApp" ng-controller="tableAppController">
<input type="text" class="form-control" ng-model="searchKey" placeholder="search..."/>
<div class="table-responsive">
<table class="table table-striped" id="trackingTable">
<thead>
<tr>
<th>No.r.</th>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in deviceData">
<td>{{ $index + 1 }}</td>
<td>{{x.a}}</td>
<td>{{x.b}}</td>
<td>{{x.c}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="scripts/AngularJS/tableAppController.js"></script>
tableAppController.js: tableAppController.js:
var app = angular.module('tableApp', []);
app.controller('tableAppController', function ($scope) {
$scope.deviceData = [{a: "123", b: "123", c: "01.01.2001"}, {a: "dummyDeviceID2", b: "dummyCarID98", c: "01.01.2001"}];
});
I'm now trying to implement an filter, which filters data from the table based on an user input from a textfield. 我现在正在尝试实现一个过滤器,该过滤器根据来自文本字段的用户输入来过滤表中的数据。 But only when a user types something inside the textbox ofcourse.
但是仅当用户在课程的文本框中键入内容时才可以。 I started to change the line
<tr ng-repeat="x in deviceData">
in the html file to <tr ng-repeat="x in deviceData | filter:{'a':searchKey}">
Why is this approach not working and how can I solve this problem? 我开始将html文件中的行
<tr ng-repeat="x in deviceData">
更改为<tr ng-repeat="x in deviceData | filter:{'a':searchKey}">
为什么这种方法不行工作,我该如何解决这个问题?
You should be able to use keys on your search object to do this: 您应该能够使用搜索对象上的键来执行此操作:
<input type="text" class="form-control" ng-model="searchKey.a" placeholder="search..."/>
<tr ng-repeat="x in deviceData | filter:searchKey">
See line 36 in the official example for more context: http://plnkr.co/edit/YUfG7yzxBQ0gT9bsnTN2?p=preview 有关更多上下文,请参见官方示例中的第36行: http : //plnkr.co/edit/YUfG7yzxBQ0gT9bsnTN2?p=preview
Try this : 尝试这个 :
{{ filter_expression | filter : expression : comparator}}
<tr ng-repeat="x in deviceData | filter : searchKey">
AngularJS Official Documentation : filter AngularJS官方文档: 过滤器
Plnkr : http://plnkr.co/edit/r6cchqzftaRiH543L1NE?p=preview Plnkr: http ://plnkr.co/edit/r6cchqzftaRiH543L1NE?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.