基于选择值的ng-repeat深度属性过滤器

Question

我是angular js的新手，我正在尝试根据所选值过滤数据。 我已经看过这个例子Plunker 。
那么，如何根据深层属性过滤数据？ 深层过滤器柱塞

 // Code goes here angular.module('app', []) .controller('Main', ['$scope', function ($scope) { $scope.title = "Filter Based on Select Value"; $scope.orders = [ { "SalesPersonViewModel": { "SalesPersonId": 1, "Fname": "Nir", "LName": "Adam" }, "PackagesViewModel": [ { "OrderId": 2, "PlatformId": 1, "RemarkId": 1, "NeedBy": "2016-02-17T00:00:00", "Closed": null, "PlannerViewModel": { "PlannerId": 1, "FName": "Nadav", "LName": "Baron", "InDate": "2016-01-21T16:09:44.56", "OutDate": null, "IsEnable": true }, "PlatformViewModel": { "PlatformId": 1, "Name": "Mediant 1000" }, "RemarkViewModel": { "RemarkId": 1, "RemarkHeaderId": 11, "RemarkBody": "Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments.", "RemarkHeaderViewModel": { "RemarkHeaderId": 11, "Header": "Planning Instructions - Internal", "ParentRemarkHeader": 10 } }, "PackageItemsViewModel": [ { "PackageItemId": 1, "PackageId": 1, "ItemId": 1, "Quantity": 1000000, "UnitPrice": 2, "ItemViewModel": { "ItemId": 1, "ItemCode": "GTPM00683", "CPN": "M1KB-ESBC-5", "Description": "Mediant 1000B Enterprise" } }, { "PackageItemId": 2, "PackageId": 1, "ItemId": 4, "Quantity": 3, "UnitPrice": 23, "ItemViewModel": { "ItemId": 4, "ItemCode": "GGWV00564", "CPN": "M8K/REV2/BA", "Description": "AudioCodes 420HD IP Phone" } }, { "PackageItemId": 3, "PackageId": 1, "ItemId": 3, "Quantity": 3, "UnitPrice": 42, "ItemViewModel": { "ItemId": 3, "ItemCode": "GTPM00057", "CPN": null, "Description": "Power Cord AC3 Wire IEC-320" } } ], "PackageId": 1, "PlannerId": 1, "ApplyToAll": false, "ShippingOrganizationId": null, "Schedule": "2016-03-09T00:00:00" }, { "OrderId": 2, "PlatformId": 1, "RemarkId": 1, "NeedBy": "2016-03-12T00:00:00", "Closed": null, "PlannerViewModel": { "PlannerId": 2, "FName": "Adi", "LName": "Ezra", "InDate": "2016-01-22T17:51:01.65", "OutDate": null, "IsEnable": true }, "PlatformViewModel": { "PlatformId": 1, "Name": "Mediant 1000" }, "RemarkViewModel": { "RemarkId": 1, "RemarkHeaderId": 11, "RemarkBody": "Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments.", "RemarkHeaderViewModel": { "RemarkHeaderId": 11, "Header": "Planning Instructions - Internal", "ParentRemarkHeader": 10 } }, "PackageItemsViewModel": [ { "PackageItemId": 6, "PackageId": 4, "ItemId": 4, "Quantity": 8, "UnitPrice": 8, "ItemViewModel": { "ItemId": 4, "ItemCode": "GGWV00564", "CPN": "M8K/REV2/BA", "Description": "AudioCodes 420HD IP Phone" } }, { "PackageItemId": 7, "PackageId": 4, "ItemId": 5, "Quantity": 8, "UnitPrice": 67, "ItemViewModel": { "ItemId": 5, "ItemCode": "LBLZ01589", "CPN": null, "Description": "LBL CPN:OP420HDE/GNS" } } ], "PackageId": 4, "PlannerId": 2, "ApplyToAll": false, "ShippingOrganizationId": 4, "Schedule": "2016-03-01T00:00:00" } ], "OrderId": 2 }, { "SalesPersonViewModel": { "SalesPersonId": 1, "Fname": "Nir", "LName": "Adam" }, "PackagesViewModel": [ { "OrderId": 3, "PlatformId": 2, "RemarkId": 1, "NeedBy": "2017-03-18T00:00:00", "Closed": null, "PlannerViewModel": { "PlannerId": 2, "FName": "Adi", "LName": "Ezra", "InDate": "2016-01-22T17:51:01.65", "OutDate": null, "IsEnable": true }, "PlatformViewModel": { "PlatformId": 2, "Name": "IP Phone" }, "RemarkViewModel": { "RemarkId": 1, "RemarkHeaderId": 11, "RemarkBody": "Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments.", "RemarkHeaderViewModel": { "RemarkHeaderId": 11, "Header": "Planning Instructions - Internal", "ParentRemarkHeader": 10 } }, "PackageItemsViewModel": [ { "PackageItemId": 8, "PackageId": 8, "ItemId": 7, "Quantity": 2, "UnitPrice": 1, "ItemViewModel": { "ItemId": 7, "ItemCode": "RACR00036", "CPN": "MKCR0036", "Description": "RAC Ticket Counter Waiting machine EPBX RJ45 KAT 447 Underground" } }, { "PackageItemId": 9, "PackageId": 8, "ItemId": 3, "Quantity": 1, "UnitPrice": 5, "ItemViewModel": { "ItemId": 3, "ItemCode": "GTPM00057", "CPN": null, "Description": "Power Cord AC3 Wire IEC-320" } }, { "PackageItemId": 10, "PackageId": 8, "ItemId": 4, "Quantity": 3, "UnitPrice": 5, "ItemViewModel": { "ItemId": 4, "ItemCode": "GGWV00564", "CPN": "M8K/REV2/BA", "Description": "AudioCodes 420HD IP Phone" } } ], "PackageId": 8, "PlannerId": 2, "ApplyToAll": false, "ShippingOrganizationId": null, "Schedule": null }, { "OrderId": 3, "PlatformId": 2, "RemarkId": 1, "NeedBy": "2017-03-18T00:00:00", "Closed": null, "PlannerViewModel": { "PlannerId": 1, "FName": "Nadav", "LName": "Baron", "InDate": "2016-01-21T16:09:44.56", "OutDate": null, "IsEnable": true }, "PlatformViewModel": { "PlatformId": 2, "Name": "IP Phone" }, "RemarkViewModel": { "RemarkId": 1, "RemarkHeaderId": 11, "RemarkBody": "Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments.", "RemarkHeaderViewModel": { "RemarkHeaderId": 11, "Header": "Planning Instructions - Internal", "ParentRemarkHeader": 10 } }, "PackageItemsViewModel": [ { "PackageItemId": 12, "PackageId": 9, "ItemId": 2, "Quantity": 3, "UnitPrice": 6, "ItemViewModel": { "ItemId": 2, "ItemCode": "GTPM00056", "CPN": "M1K-VM-4FXS", "Description": "M1K SMX-1_4FXS_Voice" } } ], "PackageId": 9, "PlannerId": 1, "ApplyToAll": false, "ShippingOrganizationId": 2, "Schedule": "2016-02-27T00:00:00" } ], "OrderId": 3 } ], $scope.platforms = [ { "PlatformId": 1, "Name": 'Mediant 1000' }, { "PlatformId": 2, "Name": 'IP Phone' } ] }]); 

 /* Styles go here */ td, th{ border:1px solid #CCC; } td > div{border:1px solid #EEE;} 

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="app" ng-controller="Main"> <div> {{title}} <br/> <br /> <select name="show-filter" ng-model="pfFilter" ng-options="Name as platform.Name for platform in platforms track by platform.PlatformId"></select> <br /> <br/> <div> <div > <table> <thead> <tr> <th>Order Id</th> <th>Platform</th> </tr> </thead> <tbody> <tr ng-repeat="o in orders | filter:{PlatformId :pfFilter.PackagesViewModel.PlatformViewModel.PlatformId}"> <td>{{o.OrderId}}</td> <td> <div ng-repeat="p in o.PackagesViewModel">{{p.PlatformViewModel.PlatformId}} : {{p.PlatformViewModel.Name}}</div> </td> </tr> </tbody> </table> </div> </div> </div> </body> </html> 

Answer 1

在文档中，您可以找到下一行

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

所以，我的情况下，您不能随意使用它。
但是，您可以使用

函数（值，索引，数组）：谓词函数可用于编写任意过滤器。 将针对数组的每个元素调用该函数，并将该元素，其索引以及整个数组本身作为参数。

像这样

$scope.comparer = function(o) {
  if (!$scope.pfFilter) return o;
  return o.PackagesViewModel.filter(function(el) {
    return el.PlatformId == $scope.pfFilter.PlatformId
  }).length;
}

完整样本：

 // Code goes here angular.module('app', []) .controller('Main', ['$scope', function($scope) { $scope.title = "Filter Based on Select Value"; $scope.orders = [{ "SalesPersonViewModel": { "SalesPersonId": 1, "Fname": "Nir", "LName": "Adam" }, "PackagesViewModel": [{ "OrderId": 2, "PlatformId": 1, "RemarkId": 1, "NeedBy": "2016-02-17T00:00:00", "Closed": null, "PlannerViewModel": { "PlannerId": 1, "FName": "Nadav", "LName": "Baron", "InDate": "2016-01-21T16:09:44.56", "OutDate": null, "IsEnable": true }, "PlatformViewModel": { "PlatformId": 1, "Name": "Mediant 1000" }, "RemarkViewModel": { "RemarkId": 1, "RemarkHeaderId": 11, "RemarkBody": "Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments.", "RemarkHeaderViewModel": { "RemarkHeaderId": 11, "Header": "Planning Instructions - Internal", "ParentRemarkHeader": 10 } }, "PackageItemsViewModel": [{ "PackageItemId": 1, "PackageId": 1, "ItemId": 1, "Quantity": 1000000, "UnitPrice": 2, "ItemViewModel": { "ItemId": 1, "ItemCode": "GTPM00683", "CPN": "M1KB-ESBC-5", "Description": "Mediant 1000B Enterprise" } }, { "PackageItemId": 2, "PackageId": 1, "ItemId": 4, "Quantity": 3, "UnitPrice": 23, "ItemViewModel": { "ItemId": 4, "ItemCode": "GGWV00564", "CPN": "M8K/REV2/BA", "Description": "AudioCodes 420HD IP Phone" } }, { "PackageItemId": 3, "PackageId": 1, "ItemId": 3, "Quantity": 3, "UnitPrice": 42, "ItemViewModel": { "ItemId": 3, "ItemCode": "GTPM00057", "CPN": null, "Description": "Power Cord AC3 Wire IEC-320" } }], "PackageId": 1, "PlannerId": 1, "ApplyToAll": false, "ShippingOrganizationId": null, "Schedule": "2016-03-09T00:00:00" }, { "OrderId": 2, "PlatformId": 1, "RemarkId": 1, "NeedBy": "2016-03-12T00:00:00", "Closed": null, "PlannerViewModel": { "PlannerId": 2, "FName": "Adi", "LName": "Ezra", "InDate": "2016-01-22T17:51:01.65", "OutDate": null, "IsEnable": true }, "PlatformViewModel": { "PlatformId": 1, "Name": "Mediant 1000" }, "RemarkViewModel": { "RemarkId": 1, "RemarkHeaderId": 11, "RemarkBody": "Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments.", "RemarkHeaderViewModel": { "RemarkHeaderId": 11, "Header": "Planning Instructions - Internal", "ParentRemarkHeader": 10 } }, "PackageItemsViewModel": [{ "PackageItemId": 6, "PackageId": 4, "ItemId": 4, "Quantity": 8, "UnitPrice": 8, "ItemViewModel": { "ItemId": 4, "ItemCode": "GGWV00564", "CPN": "M8K/REV2/BA", "Description": "AudioCodes 420HD IP Phone" } }, { "PackageItemId": 7, "PackageId": 4, "ItemId": 5, "Quantity": 8, "UnitPrice": 67, "ItemViewModel": { "ItemId": 5, "ItemCode": "LBLZ01589", "CPN": null, "Description": "LBL CPN:OP420HDE/GNS" } }], "PackageId": 4, "PlannerId": 2, "ApplyToAll": false, "ShippingOrganizationId": 4, "Schedule": "2016-03-01T00:00:00" }], "OrderId": 2 }, { "SalesPersonViewModel": { "SalesPersonId": 1, "Fname": "Nir", "LName": "Adam" }, "PackagesViewModel": [{ "OrderId": 3, "PlatformId": 2, "RemarkId": 1, "NeedBy": "2017-03-18T00:00:00", "Closed": null, "PlannerViewModel": { "PlannerId": 2, "FName": "Adi", "LName": "Ezra", "InDate": "2016-01-22T17:51:01.65", "OutDate": null, "IsEnable": true }, "PlatformViewModel": { "PlatformId": 2, "Name": "IP Phone" }, "RemarkViewModel": { "RemarkId": 1, "RemarkHeaderId": 11, "RemarkBody": "Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments.", "RemarkHeaderViewModel": { "RemarkHeaderId": 11, "Header": "Planning Instructions - Internal", "ParentRemarkHeader": 10 } }, "PackageItemsViewModel": [{ "PackageItemId": 8, "PackageId": 8, "ItemId": 7, "Quantity": 2, "UnitPrice": 1, "ItemViewModel": { "ItemId": 7, "ItemCode": "RACR00036", "CPN": "MKCR0036", "Description": "RAC Ticket Counter Waiting machine EPBX RJ45 KAT 447 Underground" } }, { "PackageItemId": 9, "PackageId": 8, "ItemId": 3, "Quantity": 1, "UnitPrice": 5, "ItemViewModel": { "ItemId": 3, "ItemCode": "GTPM00057", "CPN": null, "Description": "Power Cord AC3 Wire IEC-320" } }, { "PackageItemId": 10, "PackageId": 8, "ItemId": 4, "Quantity": 3, "UnitPrice": 5, "ItemViewModel": { "ItemId": 4, "ItemCode": "GGWV00564", "CPN": "M8K/REV2/BA", "Description": "AudioCodes 420HD IP Phone" } }], "PackageId": 8, "PlannerId": 2, "ApplyToAll": false, "ShippingOrganizationId": null, "Schedule": null }, { "OrderId": 3, "PlatformId": 2, "RemarkId": 1, "NeedBy": "2017-03-18T00:00:00", "Closed": null, "PlannerViewModel": { "PlannerId": 1, "FName": "Nadav", "LName": "Baron", "InDate": "2016-01-21T16:09:44.56", "OutDate": null, "IsEnable": true }, "PlatformViewModel": { "PlatformId": 2, "Name": "IP Phone" }, "RemarkViewModel": { "RemarkId": 1, "RemarkHeaderId": 11, "RemarkBody": "Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments. Customer will not accept any partial shipments.", "RemarkHeaderViewModel": { "RemarkHeaderId": 11, "Header": "Planning Instructions - Internal", "ParentRemarkHeader": 10 } }, "PackageItemsViewModel": [{ "PackageItemId": 12, "PackageId": 9, "ItemId": 2, "Quantity": 3, "UnitPrice": 6, "ItemViewModel": { "ItemId": 2, "ItemCode": "GTPM00056", "CPN": "M1K-VM-4FXS", "Description": "M1K SMX-1_4FXS_Voice" } }], "PackageId": 9, "PlannerId": 1, "ApplyToAll": false, "ShippingOrganizationId": 2, "Schedule": "2016-02-27T00:00:00" }], "OrderId": 3 }], $scope.platforms = [{ "PlatformId": 1, "Name": 'Mediant 1000' }, { "PlatformId": 2, "Name": 'IP Phone' }] $scope.comparer = function(o) { if (!$scope.pfFilter) return o; return o.PackagesViewModel.filter(function(el) { return el.PlatformId == $scope.pfFilter.PlatformId }).length; } }]); 

 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <div ng-app="app" ng-controller="Main"> <div> {{title}} <br/> <br /> <select name="show-filter" ng-model="pfFilter" ng-options="platform.Name for platform in platforms track by platform.PlatformId"></select> <br /> <br/> <div> <div> <table> <thead> <tr> <th>Order Id</th> <th>Platform</th> </tr> </thead> <tbody> <tr ng-repeat="o in orders | filter:comparer"> <td>{{o.OrderId}}</td> <td> <div ng-repeat="p in o.PackagesViewModel">{{p.PlatformViewModel.PlatformId}} : {{p.PlatformViewModel.Name}}</div> </td> </tr> </tbody> </table> </div> </div> </div> </div>