javascript - 使用 ng-model 按 (key, val) 对中的键进行过滤

Question

我有以下数据:

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

我尝试使用 ng-model 按键在表中过滤它。但它根本没有过滤。

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

我的 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;
  };
  });
  });

我尝试添加 $scope.searchRub = ''到 Controller 并在 html 模板中放置一个表单。

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

在此处添加了此“searchRub”过滤器:<td> {{ key | filter:searchRub }} </td>这也没有帮助。

Answer 1

您希望搜索框建模一个独立的值，然后您可以使用该值进行过滤，而不是尝试将其建模为您已在使用的对象的键。

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

有多种方法可以使用此值进行过滤，但最简单的是使用 ng-show:

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

这是一个小插曲。我对 cityId 进行了硬编码，以避免在演示中使用 RouteParams。

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

在搜索框中输入“item1”。