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

Question

I am new to angular js, and I am trying to filter data based on selected value. I have gone through this example Plunker .
So, How can I filter data based on deep properties? Deep Property Filter 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

In doc you can find next lines

Note: that a named property will match properties on the same level only , while the special $ property will match properties on the same level or deeper. Eg an array item like {name: {first: 'John', last: 'Doe'}} will not be matched by {name: 'John'} , but will be matched by {$: 'John'} .

So, i your case you can't use it as you wish.
But, you can use

function(value, index, array): A predicate function can be used to write arbitrary filters. The function is called for each element of the array, with the element, its index, and the entire array itself as arguments.

Like this

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

Full Sample:

 // 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>