CODEWITHSUNDEEP
angularjsangular-ngmodel
Sachin
Sachin

Reputation: 2361

How to use ng-model in ng-repeat with filter?

I want to add input text box to every column of table to make filtration on table based on respective column search.
Here is my HTML code for search row of table : 

<tr>
    <td ng-repeat="column in columns">
        <div class="right-inner-addon">
            <input type="text" class="form-control input-sm" ng-model="$parent.searchTableQuery.column.field">
        </div>
    </td>
</tr>


Here is my filter code : 

<tbody>
    <tr ng-repeat="item in dataSource | filter:searchTableQuery | orderBy:predicate:reverse">
        <td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
    </tr>
</tbody>

But here I am not able to filter table based on table column search.
I am not able to provide valid ng-model in search input box.

ng-model="$parent.searchTableQuery.$" is ng-model of table search input box.

Update

I have updated my issue at : http://plnkr.co/edit/5vjsRdRLTFgXhvqHVkWA?p=preview
In this issue search is working only for Id column and it is not working for any other column.

Upvotes: 0

Views: 2453

Answers (2)

Sachin
Sachin

Reputation: 2361

There was invalid key issue in my above code.
I have resolved my issue based on sylwester's code as follow :

  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="key in getKeysOfCollection(colors[0])">{{key}}
          <input type="text" ng-model="search[key]"  />
        </th>
      </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in colors | filter:search">
          <td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
        </tr>

    </tbody>
  </table>

  $scope.search = {};

  $scope.colors = [{
    'id': 1,
    'productId': 1001,
    'productName': 'prd 1',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-01T06:41:30.809Z'
  }, {
    'id': 2,
    'productId': 1002,
    'productName': 'prd 2',
    'minimumLevel': 23,
    'price': 12.54,
    'productDate': '2014-11-02T06:41:30.809Z'
  }, {
    'id': 3,
    'productId': 1003,
    'productName': 'prd 3',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-04T06:41:30.809Z'
  }, {
    'id': 4,
    'productId': 1004,
    'productName': 'prd 4',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-22T06:41:30.809Z'
  }, {
    'id': 5,
    'productId': 1005,
    'productName': 'prd 5',
    'minimumLevel': 2,
    'price': 12.50,
    'productDate': '2014-11-18T06:41:30.809Z'
  }];

  $scope.getKeysOfCollection = function(obj) {
    obj = angular.copy(obj);
    if (!obj) {
      return [];
    }
    return Object.keys(obj);
  }

Now, I can filter table based on column search without specifying name of column in ng-repeat.
Working plunker is at http://plnkr.co/edit/5vjsRdRLTFgXhvqHVkWA

Upvotes: 0

sylwester
sylwester

Reputation: 16498

Please see demo below

you can create generic filter header like below:

<tr>
  <th ng-repeat="(key, value) in myArray[0]">
      <input type="text" ng-model="search[key]" />
    </th>
</tr>


angular.module('MyModule', [])

.controller('MyController', function($scope) {

  $scope.search = {};

  $scope.colors = [{
    id: 11,
    name: 'black',
    shade: 'dark'
  }, {
    id: 22,
    name: 'white',
    shade: 'light'
  }, {
    id: 32,
    name: 'red',
    shade: 'dark'
  }, {
    id: 44,
    name: 'blue',
    shade: 'dark'
  }, {
    id: 5,
    name: 'yellow',
    shade: 'light'
  }];




});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller="MyController">


  <table border="1">
    <thead>
      <tr>
        <th ng-repeat="(key, value) in colors[0]">
          <input type="text" ng-model="search[key]" />
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <tr ng-repeat="c in colors | filter:search">
          <td>{{c.id}}</td>
          <td>{{c.name}}</td>
          <td>{{c.shade}}</td>
        </tr>

    </tbody>
  </table>
</div>

Upvotes: 2

Related Questions