我正在尝试创建一个表格，过滤后仅显示包含搜索框中任何字符串的行。我有一个简单的例子，我只是想根据 w3schools tutorial 开始工作: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_css
这是我的过滤器
<tr ng-repeat="x in names | filter:searchKeyword">
它看起来与 API 引用中给出的示例非常相似:<tr ng-repeat="friend in friends | filter:searchText">
https://docs.angularjs.org/api/ng/filter/filter
问题是当我在搜索框中输入内容时没有任何反应。我希望表格随着搜索词的变化而动态变化。我错过了什么？
这是我的代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<label>Search: <input type="text" ng-model="searchKeyword"></label>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names | filter:searchKeyword">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
<td>{{ x.City }} </td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.names = [
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
{"Name":"Around the Horn","City":"London","Country":"UK"},
{"Name":"B's Beverages","City":"London","Country":"UK"},
{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},
{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"Name":"Bon app'","City":"Marseille","Country":"France"},
{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
];
});
</script>
</body>
</html>
最佳答案
您只需将输入框放入您的应用程序中:) 另外，DOM 过滤器很糟糕(将 $filter 注入(inject)您的 Controller 中)。看看为什么:https://toddmotto.com/use-controller-filters-to-prevent-digest-performance-issues/
(只是按照要求将我的评论放入答复表格中。)
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
$scope.names = [
{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"},
{"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"},
{"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
{"Name":"Around the Horn","City":"London","Country":"UK"},
{"Name":"B's Beverages","City":"London","Country":"UK"},
{"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"},
{"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"},
{"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"},
{"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"},
{"Name":"Bon app'","City":"Marseille","Country":"France"},
{"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"},
{"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"},
{"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"},
{"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"},
{"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
];
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl">
<label>Search: <input type="text" ng-model="searchKeyword"></label>
<table>
<tr ng-repeat="x in names | filter:searchKeyword">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
<td>{{ x.City }} </td>
</tr>
</table>
</div>关于javascript - 为什么 AngularJS ng-repeat 过滤搜索词不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43904741/