CODEWITHSUNDEEP
javascripthtmlangularjs
Abhishek Pandey
Abhishek Pandey

Reputation: 13558

Simple search filter is not working in ng-if angularjs

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

Upvotes: 0

Views: 1359

Answers (3)

DNadal
DNadal

Reputation: 21

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"

Upvotes: 1

Shahzad
Shahzad

Reputation: 1703

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, i.e. 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.

Upvotes: 0

amansinghgusain
amansinghgusain

Reputation: 774

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>

Upvotes: 0

Related Questions