为什么 AngularJS ng-repeat 过滤器搜索词不起作用？

Question

I'm trying to make a table that filters to only show rows that contain whatever string is in the search box.我正在尝试制作一个过滤表以仅显示包含搜索框中任何字符串的行。 I have a simple example that I'm just trying to get to work based off the w3schools tutorial : https://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_css我有一个简单的例子，我只是想根据w3schools 教程开始工作： https : //www.w3schools.com/angular/tryit.asp ? filename = try_ng_tables_css

This is my filter <tr ng-repeat="x in names | filter:searchKeyword">这是我的过滤器<tr ng-repeat="x in names | filter:searchKeyword">

And it looks pretty similar to the example given in the API reference: <tr ng-repeat="friend in friends | filter:searchText"> https://docs.angularjs.org/api/ng/filter/filter它看起来与 API 参考中给出的示例非常相似： <tr ng-repeat="friend in friends | filter:searchText"> https://docs.angularjs.org/api/ng/filter/filter

The problem is that nothing happens when I type stuff in the search box.问题是当我在搜索框中输入内容时没有任何反应。 I expect the table to dynamically change as the search term changes.我希望表格随着搜索词的变化而动态变化。 What am I missing?我错过了什么？

Here is the code I have:这是我的代码：

<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>

Answer 1

You just need to put your input box inside your app :) Also, DOM filters suck (inject $filter into your controller instead).你只需要把你的输入框放在你的应用程序中 :) 此外，DOM 过滤器很糟糕（将$filter注入你的控制器）。 See why: https://toddmotto.com/use-controller-filters-to-prevent-digest-performance-issues/查看原因： https : //toddmotto.com/use-controller-filters-to-prevent-digest-performance-issues/

(Just putting my comment in answer form as requested.) （只需按照要求将我的评论放入答案表格中。）

 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 DF","Country":"Mexico"}, {"Name":"Antonio Moreno Taquería","City":"México DF","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 DF","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>

为什么 AngularJS ng-repeat 过滤器搜索词不起作用？

问题描述

1 个解决方案

解决方案1
4 已采纳 2017-05-11 03:09:39

为什么 AngularJS ng-repeat 过滤器搜索词不起作用？

问题描述

1 个解决方案

解决方案1 4 已采纳 2017-05-11 03:09:39

解决方案1
4 已采纳 2017-05-11 03:09:39