Блог

Это образец Json, который я использую для рендеринга в моем html с помощью директивы Angular 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 я также попытался отфильтровать его на основе атрибута port, который является частью объекта wanpipe, который, в свою очередь, состоит из других объектов, а именно wp1, wp2, wp3 и т. Д., Имеющих атрибут port .
Я перепробовал много вещей, чтобы заставить его работать, но потерпел неудачу, любая помощь была бы очень признательна.

Чтобы выполнить глубокую фильтрацию, вы используете $ знак вместо фактического имени свойства. Итак, если вы хотите выполнить глубокий поиск по всем свойствам вашего объекта, вы можете использовать

Из документации angularjs:

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

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

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

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

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