javascript - ng-repeat deep properties filter based on select value -
i new angular js, , trying filter data based on selected value. have gone through example plunker.
so, how can 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 not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept 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 not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept 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 not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept 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 not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept 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 platform.name platform in platforms track 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>
in doc can find next lines
note: named property match properties on same level only, while special $ property match properties on same level or deeper. e.g. array item
{name: {first: 'john', last: 'doe'}}not matched{name: 'john'}, matched{$: 'john'}.
so, case can't use wish.
but, can use
function(value, index, array): predicate function can used write arbitrary filters. function called each element of array, element, index, , entire array 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 not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept 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 not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept 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 not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept 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 not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept partial shipments. customer not accept 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 platform in platforms track 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>
Comments
Post a Comment