Schlüssel in (key, val) Paar verwendet ng-Modell

Question

I folgende Daten ahave:

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

Ich versuche es in einer Tabelle zu filtern, indem Schlüssel ng-model verwenden. Aber es filtert überhaupt nicht.

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

Mein 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; 
    }; 
    }); 
    }); 

Ich habe versucht, $scope.searchRub = '' an den Controller hinzuzufügen und ein Formular in der HTML-Vorlage zu setzen.

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

hat dieses Bild 'searchRub' Filter hier: <td> {{ key | filter:searchRub }} </td> Es hat auch nicht geholfen.

Answer 1

Sie möchten, dass das Suchfeld einen unabhängigen Wert modelliert, den Sie dann zum Filtern verwenden können, anstatt es mit dem Schlüssel eines Objekts zu modellieren, das Sie bereits verwenden.

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

Es gibt eine Reihe von Möglichkeiten, um diesen Wert zu verwenden, um zu filtern, aber die einfachste ist mit einer ng-Show:

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

Hier die zupfen sind. Ich habe die cityId fest codiert, um routeParams für die Demo zu vermeiden.

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

Typ "item1" in das Suchfeld ein.

Answer 2

Sie Underscore.js dies zu erreichen, verwenden können,

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

in $scope.specific_key, wird zurückgegeben enthalten Tasten 'reiben'.