Fatal编程技术网
  • javascript/
  • Javascript 为什么搜索词的AngularJS ng重复过滤器不起作用？

Javascript 为什么搜索词的AngularJS ng重复过滤器不起作用？

javascript html angularjs

Javascript 为什么搜索词的AngularJS ng重复过滤器不起作用？,javascript,html,angularjs,angularjs-directive,angular-filters,Javascript,Html,Angularjs,Angularjs Directive,Angular Filters,我正在尝试创建一个表，该表将筛选为仅显示包含搜索框中任何字符串的行。我举了一个简单的例子，我只是想通过以下方式开始工作： 这是我的过滤器 它看起来与API参考中给出的示例非常相似： 问题是，当我在搜索框中键入内容时，什么也不会发生。我希望表会随着搜索词的变化而动态变化。我错过了什么 以下是我的代码： <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.

我正在尝试创建一个表，该表将筛选为仅显示包含搜索框中任何字符串的行。我举了一个简单的例子，我只是想通过以下方式开始工作：

这是我的过滤器

它看起来与API参考中给出的示例非常相似：

问题是，当我在搜索框中键入内容时，什么也不会发生。我希望表会随着搜索词的变化而动态变化。我错过了什么

以下是我的代码：

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


搜索：
{{x.Name}
{{x.国家}
{{x.城市}
var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope）{
$scope.names=[
{“姓名”：“阿尔弗雷德·富特基斯特”，“城市”：“柏林”，“国家”：“德国”}，
{“名称”：“Ana Trujillo Emparedados y helados”，“城市”：“墨西哥”，国家∶“墨西哥”}，
{“姓名”：“安东尼奥·莫雷诺·塔奎亚”、“城市”：“墨西哥”、“国家”：“墨西哥”}，
{“名称”：“环绕号角”、“城市”：“伦敦”、“国家”：“英国”}，
{“名称”：“B’s饮料”、“城市”：“伦敦”、“国家”：“英国”}，
{“名称”：“Berglunds snabbköp”，“城市”：“Luleå”，“国家”：“瑞典”}，
{“名称”：“布劳尔·希德利卡泰森”，“城市”：“曼海姆”，“国家”：“德国”}，
{“姓名”：“布隆德尔·佩雷·菲尔斯”，“城市”：“斯特拉斯堡”，“国家”：“法国”}，
{“名称”：“Bólido Comidas preparadas”，“城市”：“马德里”，“国家”：“西班牙”}，
{“姓名”：“Bon app'”，“城市”：“马赛”，“国家”：“法国”}，
{“姓名”：“底层美元市场”，“城市”：“Tsawassen”，“国家”：“加拿大”}，
{“名称”：“Cactus Comidas para llevar”，“城市”：“布宜诺斯艾利斯”，“国家”：“阿根廷”}，
{“名称”：“商业中心莫特祖马”、“城市”：“墨西哥”、“国家”：“墨西哥”}，
{“姓名”：“肖普苏伊中文”，“城市”：“伯尔尼”，“国家”：“瑞士”}，
{“名称”：“Comércio Mineiro”，“城市”：“圣保罗”，“国家”：“巴西”}
];
});
你只需要把你的输入框放在你的应用程序中：）另外，DOM过滤器会吸（将
$filter
注入你的控制器）。看看原因：

（只需按要求将我的意见以答复形式填写。）

var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope）{
$scope.names=[
{“姓名”：“阿尔弗雷德·富特基斯特”，“城市”：“柏林”，“国家”：“德国”}，
{“名称”：“Ana Trujillo Emparedados y helados”，“城市”：“墨西哥”，国家∶“墨西哥”}，
{“姓名”：“安东尼奥·莫雷诺·塔奎亚”、“城市”：“墨西哥”、“国家”：“墨西哥”}，
{“名称”：“环绕号角”、“城市”：“伦敦”、“国家”：“英国”}，
{“名称”：“B’s饮料”、“城市”：“伦敦”、“国家”：“英国”}，
{“名称”：“Berglunds snabbköp”，“城市”：“Luleå”，“国家”：“瑞典”}，
{“名称”：“布劳尔·希德利卡泰森”，“城市”：“曼海姆”，“国家”：“德国”}，
{“姓名”：“布隆德尔·佩雷·菲尔斯”，“城市”：“斯特拉斯堡”，“国家”：“法国”}，
{“名称”：“Bólido Comidas preparadas”，“城市”：“马德里”，“国家”：“西班牙”}，
{“姓名”：“Bon app'”，“城市”：“马赛”，“国家”：“法国”}，
{“姓名”：“底层美元市场”，“城市”：“Tsawassen”，“国家”：“加拿大”}，
{“名称”：“Cactus Comidas para llevar”，“城市”：“布宜诺斯艾利斯”，“国家”：“阿根廷”}，
{“名称”：“商业中心莫特祖马”、“城市”：“墨西哥”、“国家”：“墨西哥”}，
{“姓名”：“肖普苏伊中文”，“城市”：“伯尔尼”，“国家”：“瑞士”}，
{“名称”：“Comércio Mineiro”，“城市”：“圣保罗”，“国家”：“巴西”}
];
});


搜索：
{{x.Name}
{{x.国家}
{{x.城市}

你只需要把你的输入框放在你的应用程序中：）参见演示：还有，DOM过滤器（将
$filter
注入你的控制器）。看看为什么：谢谢！这就解决了问题。另外，谢谢你的推荐。我肯定会学习如何提高过滤性能。我建议@sh0ber添加他们的评论作为答案，这样就可以得出结论并结束了。@Phix好了！