Поиск и фильтрация через значение глубокого json с помощью Angular $ filter

Question

Это образец Json, который я использую для рендеринга в моем html, используя директиву Angler ng-repeat.

[ 
    { 
    "id": "10.0.0.208", 
    "ip_address": "10.0.0.208", 
    "username": "root", 
    "password": "--invalid secret key--", 
    "ports": [ 
     8056, 
     8057 
    ], 
    "installations": 2, 
    "created": "2016-07-15 17:41:36", 
    "wanpipe": { 
     "wp1": { 
     "port": 8056, 
     "physical": true, 
     "signalling": true, 
     "outgoing": true, 
     "hangup_cause": "NORMAL_CLEARING", 
     "outgoing_caller_id": "1409716078" 
     }, 
     "wp2": { 
     "port": 8056, 
     "physical": true, 
     "signalling": true, 
     "outgoing": true, 
     "hangup_cause": "NORMAL_CLEARING", 
     "outgoing_caller_id": "1409716077" 
     }, 
     "wp3": { 
     "port": 8056, 
     "physical": true, 
     "signalling": true, 
     "outgoing": true, 
     "hangup_cause": NORMAL_CLEARING","outgoing_caller_id":"1409716077" 
    } 
] 

Я сделал панель поиска в HTML с помощью вызова углового фильтра на атрибут ip_address, который заключается в следующем. Он работает и возвращает мне фильтрованный массив, называемый pagedItems, который я могу повторить снова, используя ng-repeat.

$scope.figureOutIPToDisplay = function(searchIP) { 
     console.log(searchIP); 
     $scope.filteredItems = $filter('filter')($scope.json.json, { 
      ip_address : $scope.searchIP 
     }); 

     $scope.pagedItems = $scope.filteredItems; 
     console.log($scope.pagedItems); 

    }; 

Ниже приводится HTML-код,

<div class="row" ng-repeat=" init in pagedItems "> 
<div ng-repeat="(key,wanpipe) in init.wanpipe" class=" col-lg-1 col-md-1 col-sm-4 col-xs-4 "> 
             <button popover-trigger="focus" uib-popover-template="templateUrl" ng-if="wanpipe.physical==true"type="button" class="btn btn-primary" >{{key}}</button> 

             <button popover-trigger="focus" uib-popover-template="templateUrl" ng-if="wanpipe.physical==false" type="button" class="btn btn-danger">{{key}}</button> 

             <script type="text/ng-template" id="myPopoverTemplate.html"> 
              <div class="row ipAddressdetails"> 
               <div class="col-lg-12 col-md-12 text-center"> 
                <span class="glyphicon glyphicon-random"></span> Port: {{wanpipe.port}} 
               </div> 
              </div> 
              <div class="row ipAddressdetails"> 
               <div class="col-lg-12 col-md-12 text-center"> 
                <span class="glyphicon glyphicon-time"></span> Physical: {{wanpipe.physical}} 
               </div> 
</div> 

Однако в упомянутом выше Json, я также пытался фильтровать на основе атрибута порта, который является частью объекта WANPIPE, который в свою очередь, состоит из других объектов, а именно wp1, wp2, wp3 и т. д., имеющих атрибут порта. Я пробовал много вещей, чтобы заставить его работать, но потерпел неудачу, любая помощь была бы весьма признательна.

Answer 1

Для того, чтобы сделать глубокий фильтр, вы используете знак $ вместо фактического названия свойства. Так что если вы хотите глубоко поиск по всем свойствам в вашем объекте вы можете использовать

From angularjs documentation:

Обратите внимание, что поименованное свойство будет соответствовать свойствам только на тот же уровень , в то время как специальный $ собственность будет соответствовать свойствам на том же уровне или глубже. Например. элемент массива, например {name: {first: 'John', last: 'Doe'}} не будет сопоставлен {name: 'John'}, но будет соответствовать {$: 'John'}

$scope.filteredItems = $filter('filter')($scope.json.json, { 
      $: $scope.searchIP 
     }); 

Однако в вышеупомянутом Json, я также пытался фильтровать ее на основе атрибута порта, который является частью объекта WANPIPE, который, в свою очередь, состоит из других объектов, а именно WP1, wp2, wp3 и т. д. с атрибутом порта.

Это может сработать для вашего сценария. Это будет выглядеть только wanpipe собственности.

$scope.filteredItems = $filter('filter')($scope.json.json, { 
      wanpipe: {$: $scope.searchIP} 
     });