我是 Angular 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>最佳答案
在 doc你可以找到下一行
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. E.g. an array item like
{name: {first: 'John', last: 'Doe'}}will not be matched by{name: 'John'}, but will be matched by{$: 'John'}.
所以，在你的情况下，你不能按照你的意愿使用它。
但是，您可以使用
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.
像这样
$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>关于javascript - ng-repeat 基于选择值的深层属性过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35239004/