我是角度js的新手，我正在尝试根据选定的值过滤数据。 我已经完成了这个例子Plunker 那么，如何根据深层属性过滤数据？ 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>
答案 0 :(得分：1)
在doc中，您可以找到下一行
注意：命名的属性仅匹配同一级别的属性，而特殊的$属性将匹配相同属性等级或更深。例如。像
{name: {first: 'John', last: 'Doe'}}这样的数组项不会与{name: 'John'}匹配，但会与{$: 'John'}匹配。
所以，我的情况是你无法按照自己的意愿使用它 但是，你可以使用
function（value，index，array）：谓词函数可用于写入任意过滤器。为数组的每个元素调用该函数，其中元素，索引和整个数组本身作为参数。
喜欢这个
$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>