Filter by key in (key, val) pair using ng-model

Question

I ahave the following data:

[
  {
    "rub": {
      "item1": 979,
      "item2": 32,
      "item3": 845
    },
    "shop": "shop1",
  },
  {
    "rub": {
      "item232": 84,
      "item213": 348
    },
    "shop": "shop2"
  }
]

I try to filter it in a table by key using ng-model. But it isn't filtering at all.

<table class="table ng-cloak" ng-repeat="rub in rubs | filter:isActive" ng-if='isActive'>
  <input type="text" class="form-control" placeholder="Товар" ng-model="rub.rub[key]">
    <thead>
      <tr>
        <th>#</th>
        <th>Товар</th>
        <th>Число</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat='(key, val) in rub.rub'>
        <td>{{ $index }}</td>
        <td>{{ key }}</td>
        <td>{{ val }}</td>
      </tr>                  
    </tbody>
  </table>

My controller:

curryControllers.controller('CurryRubricsCtrl', ['$scope', '$routeParams', '$http', '$route',
  function($scope, $routeParams, $http, $route) {
    $scope.cityId = $routeParams.cityId;
    $http.get('cities.json').success(function(data) {
      $scope.cities = data;
    $http.get('json/shop_data.json').success(function(data2) {
      $scope.rubs = data2;

      $scope.isActive = function(item) {
    return item.shop === $scope.cityId;
  };
  });
  });

I've tried to add $scope.searchRub = '' to the controller and put a form in the html template.

  <form>
    <div class="form-group">
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>

        <input type="text" class="form-control" placeholder="Поиск" ng-model="searchRub">

      </div>      
    </div>
  </form>

Added this 'searchRub' filter here : <td> {{ key | filter:searchRub }} </td> It didn't help either.

Answer 1

You want the search box to model an independent value which you can then use to filter, rather than trying to model it to the key of an object that you are already using.

<input type="text" class="form-control" placeholder="Товар" ng-model="search”>

There are a number of ways to use this value to filter, but the easiest is with an ng-show:

<tr ng-repeat='(key, val) in rub.rub' ng-show="search ? search===key : true">

Here’s the plunk. I’ve hardcoded the cityId to avoid using routeParams for the demo.

https://plnkr.co/edit/sI8HAbNKBBJGMx0FediD?p=preview

type "item1" into the search box.