简单的搜索过滤器在ng-if angularjs中不起作用

Question

I'm using angularjs search filter, it's working fine but I want search box only in Cars list so I added ng-if="key=='Cars'" on search box so it will appear in cars only, but after adding ng-if filter stopped working, I'm not able to figureout why it isn't working?

<div class="form-group" ng-if="key=='Cars'">
 <input type="text" ng-model="search" placeholder="Search in {{key}}" class="form-control input-sm" />
</div>

 angular.module('myApp', []).controller('myCtrl', function($scope) { $scope.data = { "Cars": ["Ferrari", "Lamborghini", "Mercedes", "BMW", "Audi", "Bugatti", "Ford"], "object": [0, 1, 2, 3, 4, 5, 6, 7], "object3": [0, 1, 2, 3, 4, 5, 6, 7] } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div class="container"> <div class="row"> <div class="col-xs-4" ng-repeat="(key,val) in data"> <div class="panel panel-default"> <div class="panel-heading">{{key}}</div> <div class="panel-body"> <div class="form-group" ng-if="key=='Cars'"> <input type="text" ng-model="search" placeholder="Search in {{key}}" class="form-control input-sm" /> </div> <table class="table"> <tr ng-repeat="j in val | filter:search"> <td>{{j}}</td> </tr> </table> </div> </div> </div> </div> </div> </div> 

There isn't any error in console

Answer 1

Change your ng-if to ng-show="key==='Cars'"

Here is a working Fiddle

You can use this Fiddle as a solution. Maintain an array of search params respective to key. What is does is, it maintains a search param for each of the keys in your data object. It creates a new array called search in your data . And $index is the index of the parameter being used. For cars, it is 0, for object it would be 1 and so on. So, the textbox for cars will only update the corresponding search parameter bound to that, ie the value at 0th index. The other inputs, that are hidden are actually bound to values as 1st and 2nd index respectively. So there is no override of value.

Answer 2

If you don't want search model to be global, then wrap your table inside ng-if

 angular.module('myApp', []).controller('myCtrl', function($scope) { $scope.data = { "Cars": ["Ferrari", "Lamborghini", "Mercedes", "BMW", "Audi", "Bugatti", "Ford"], "object": [0, 1, 2, 3, 4, 5, 6, 7], "object3": [0, 1, 2, 3, 4, 5, 6, 7] } }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="myCtrl"> <div class="container"> <div class="row"> <div class="col-xs-4" ng-repeat="(key,val) in data"> <div class="panel panel-default"> <div class="panel-heading">{{key}}</div> <div class="panel-body"> <div class="form-group" ng-if="key=='Cars' || key=='object3'"> <input type="text" ng-model="search" placeholder="Search in {{key}}" class="form-control input-sm" /> <table class="table"> <tr ng-repeat="j in val | filter:search"> <td>{{j}}</td> </tr> </table> </div> <div class="form-group" ng-if="key!='Cars' && key!='object3'"> <table class="table"> <tr ng-repeat="j in val | filter:search"> <td>{{j}}</td> </tr> </table> </div> </div> </div> </div> </div> </div> </div> 

Answer 3

I had the same issue when filtering a list from a dropdown that displayed with ng-if. The problem is that ng-if creates a child scope, so in order to reach the list you need change to "ng-model="$parent.search"