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

Question

我有以下数据：

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

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

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

我的控制器：

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 = '' 添加到控制器并在 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

您可以使用 Underscore.js 来实现，

data = [
  {
    "rub": {
      "item1": 979,
      "item2": 32,
      "item3": 845
    },
    "shop": "shop1"
  },
  {
    "rub": {
      "item232": 84,
      "item213": 348
    },
    "shop": "shop2"
  }
]
$scope.specific_key = []
_.filter(data, function(val){$scope.specific_key.push(val['rub'])});
console.log($scope.specific_key);

在 $scope.specific_key 中，它将 return 包含键 'rub' .

Answer 2

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

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

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

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

javascript

angularjs

angular-ngmodel

angularjs-ng-model