AngularJS：过滤器通过未提及的属性应用答案

【问题标题】：AngularJS: filter applies through property which is not mentionedAngularJS：过滤器通过未提及的属性应用
【发布时间】：2013-11-25 10:20:15
【问题描述】：

我有以下代码

angularDemo.html

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title></title>

</head>
<body >
<div data-ng-view=""></div>
<script src="angular.min.js"></script>
<script>
var demoApp = angular.module('demoApp',[]);
demoApp.config(function($routeProvider){
    $routeProvider
        .when('/',
              {
                controller: 'SimpleController',
                templateUrl: 'Partials/view1.html'          
              })
        .when('/view2',
              {
                controller: 'SimpleController',
                templateUrl: 'Partials/view2.html'
              })
        .otherwise({redirectTo:'/'});
});
demoApp.controller('SimpleController',function($scope){

$scope.customers = [{name:'Pranav', city:'Pune'},{name:'Yogi', city:'Banglore'},{name:'Ashish', city:'Malad'},{name:'Ritesh', city:'bangkok'}];

});
</script>
<div data-ng-controller="SimpleController">

</div>
</body>
</html>

Partials/view1.html

<!DOCTYPE html>
<html data-ng-app>
<head>
<title>View 1</title>
</head>
<body>
<div class='container'>
<input ng-model='name1' type='text'>
<p>{{name1}}, How is it going?</p>
<ul>
    <li data-ng-repeat="cust in customers | filter:name1 | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
<a href="#/view2">View 2</a>
</div>



</body>

</html>

Partials/view2.html

<!DOCTYPE html>
<html data-ng-app>
<head>
<title>View 2</title>
</head>
<body>
<div class='container'>
<input ng-model='city' type='text'>
<p>{{city}}, Its a Beautifull place to be.</p>
<ul>
    <li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>

</div>
</body>

</html>

现在，每当我在输入中输入任何城市名称以过滤 view1 中的列表时，它都会被过滤，但根据功能，它应该只按客户名称过滤，反之亦然也在 view2.html 中发生

能否帮助我了解此过滤器属性是如何在这里工作的？

【问题讨论】：

标签： javascript angularjs angularjs-filter

【解决方案1】：

您尚未定义客户属性，因此过滤器适用于所有客户属性。
您需要做的是为每个过滤器定义客户属性

 <li data-ng-repeat="cust in customers | filter:{name:name1} | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>

和

 <li data-ng-repeat="cust in customers | filter:{city:city} | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>

AngularJS official docs on filter

【讨论】：

您的解决方案是有效的，但我只是参考了手册，在那里我知道我应用过滤器的方式会按照我的代码现在的行为方式做出反应，因此它必须是具体使用.$符号

【解决方案2】：

您可以根据您的对象结构定义应过滤的内容：

<li data-ng-repeat="cust in customers | filter:{city:name1} | orderBy:'city'">

更新：

这是您的数据模型：

$scope.customers = [{name:'Pranav', city:'Pune'},{name:'Yogi', city:'Banglore'},{name:'Ashish', city:'Malad'},{name:'Ritesh', city:'bangkok'}];

在视图1中：

<input ng-model='name1' type='text'>
<p>{{name1}}, How is it going?</p>
<ul>
    <li data-ng-repeat="cust in customers | filter:{name:name1}| orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>

在视图2中：

<input ng-model='city1' type='text'>
<p>{{city}}, Its a Beautifull place to be.</p>
<ul>
    <li data-ng-repeat="cust in customers | filter:{city:city1} | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>

基本上，您是在告诉过滤器函数，该函数通过值为 city1 的城市属性过滤客户对象数组，对于 view2 的名称也是如此。

这应该可以满足您的需要。

您可以阅读有关过滤器的信息：http://docs.angularjs.org/api/ng.filter:filter

【讨论】：

我不确定您是否理解问题，先生，重点是 view1 应该只搜索名称，view 2 应该只搜索城市
非常感谢