Question

我有以下代码

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>

局部模板/ 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>

局部模板/ 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中

有些人可以帮我理解这个滤镜是如何在这里工作的吗？

Answer 1

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

<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'}];

在view1中：

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

在view2中：

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

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

这应该做你需要的。

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

Answer 2

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

 <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

AngularJS：过滤器适用于未提及的属性

2 个答案: