这是我使用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等。我已经尝试了很多方法来使其正常运行,但失败惨痛,我们将不胜感激。
为了进行深层过滤,您可以使用$
符号代替实际的属性名称。因此,如果您想深入搜索对象中的所有属性,可以使用
请注意,命名属性将仅匹配同一级别的属性,而特殊的$属性将匹配同一级别或更深级别的属性。例如,类似{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] 删除。
我来说两句