使用Angular $ filter搜索和过滤深层json值

Sushant dahiya

这是我使用Angular的ng-repeat指令在HTML中呈现的示例Json。

[
  {
    "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"
  }
]

我通过在属性ip_address上调用角度过滤器来创建HTML的搜索栏,如下所示。它可以正常工作,并返回给我一个名为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对象的一部分,而该对象又由其他具有port属性的对象组成,即wp1,wp2,wp3等。我已经尝试了很多方法来使其正常运行,但失败惨痛,我们将不胜感激。

哥萨曼

为了进行深层过滤,您可以使用$符号代替实际的属性名称。因此,如果您想深入搜索对象中的所有属性,可以使用

从angularjs文档中

请注意,命名属性将仅匹配同一级别的属性,而特殊的$属性将匹配同一级别或更深级别的属性。例如,类似{name:{first:'John',last:'Doe'}}的数组项将不会与{name:'John'}匹配,但会与{$:'John'}匹配

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

但是,在前面提到的Json中,我还尝试根据端口属性对它进行过滤,该端口属性是wanpipe对象的一部分,而该对象又由其他具有port属性的对象组成,即wp1,wp2,wp3等。

这可能适用于您的方案。这将仅查看wanpipe属性。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章