CODEWITHSUNDEEP
javascriptangularjsangularjs-filter
Padyster
Padyster

Reputation: 1003

AngularJS: filter applies through property which is not mentioned

I have a below code

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>

Now whenever I type any city-name in input to filter the list in view1, then it gets filtered, but as per the functionality it should only filter by name of customer and vice versa is also happening in view2.html

Could some help me understanding how is this filter proeprty working in here?

Upvotes: 0

Views: 414

Answers (2)

code90
code90

Reputation: 718

you can define what should be filtered based on your object structure:

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

UPDATE:

this is your data model:

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

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

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

Basically, you are telling filter function that filter the array of customer objects by the city property which has value of city1, and for view2 the same for name.

this should do what you need.

You can read about filters: http://docs.angularjs.org/api/ng.filter:filter

Upvotes: 1

Alexey
Alexey

Reputation: 1330

You have not defined customer property, so the filter applies to all customer properties.
What you need to do is to define customer properties for each filter

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

and 

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

AngularJS official docs on filter

Upvotes: 1

Related Questions