如何筛选ng选项

Question

客户可以看到表上的所有文档。文档有自己的服务调用，我有一些选择框，它们可以用来过滤它们。其中一个选项是"位置"。数据库中有很多位置，我不希望它们都可用，我只希望与特定文档的位置匹配。

文档JSON

[{
    "$id": "1",
    "DocumentId": 75,
    "DocumentDate": "2015-01-31T22:00:00",
    "DocumentUrl": "/Files/Black Elk-Invoices-None-January 2015.pdf",
    "UploadDate": "2015-02-20T05:25:22.737",
    "UploadedBy": "Rudy Sanchez",
    "CompanyName": "Black_Elk",
    "Plant": "None",
    "Type": "Invoices",
    "Location": "None",
    "CounterParty": "None",
    "Pipe": "None",
    "CompanyId": 1,
    "PlantId": 1,
    "TypeId": 2,
    "LocationId": 1,
    "PipeId": 1,
    "CounterPartyId": 1
}, {
    "$id": "2",
    "DocumentId": 78,
    "DocumentDate": "2015-04-30T22:00:00",
    "DocumentUrl": "/Files/Saratoga-Processing Statements-None-April 2015.pdf",
    "UploadDate": "2015-02-20T05:29:34.527",
    "UploadedBy": "Rudy Sanchez",
    "CompanyName": "Saratoga",
    "Plant": "Baytown",
    "Type": "Processing Statements",
    "Location": "None",
    "CounterParty": "None",
    "Pipe": "None",
    "CompanyId": 2,
    "PlantId": 2,
    "TypeId": 3,
    "LocationId": 1,
    "PipeId": 1,
    "CounterPartyId": 1
}, {
    "$id": "3",
    "DocumentId": 79,
    "DocumentDate": "2015-08-31T22:00:00",
    "DocumentUrl": "/Files/Black Elk-Sales Data-None-August 2015.pdf",
    "UploadDate": "2015-02-20T05:29:45.147",
    "UploadedBy": "Rudy Sanchez",
    "CompanyName": "Black_Elk",
    "Plant": "None",
    "Type": "Sales Data",
    "Location": "None",
    "CounterParty": "None",
    "Pipe": "None",
    "CompanyId": 1,
    "PlantId": 1,
    "TypeId": 4,
    "LocationId": 1,
    "PipeId": 1,
    "CounterPartyId": 1
}, {
    "$id": "4",
    "DocumentId": 80,
    "DocumentDate": "2015-02-28T22:00:00",
    "DocumentUrl": "/Files/Black Elk-Invoices-CounterParty A-February 2015.pdf",
    "UploadDate": "2015-02-20T05:30:25.507",
    "UploadedBy": "Rudy Sanchez",
    "CompanyName": "Black_Elk",
    "Plant": "None",
    "Type": "Invoices",
    "Location": "None",
    "CounterParty": "CounterParty A",
    "Pipe": "None",
    "CompanyId": 1,
    "PlantId": 1,
    "TypeId": 2,
    "LocationId": 1,
    "PipeId": 1,
    "CounterPartyId": 2
}]

位置JSON

[{
    "$id": "1",
    "LocationId": 1,
    "LocationName": "None",
    "Documents": null
}, {
    "$id": "6",
    "LocationId": 6,
    "LocationName": "BS 32 (G)",
    "Documents": null
}, {
    "$id": "7",
    "LocationId": 7,
    "LocationName": "MP 140 (T)",
    "Documents": null
}, {
    "$id": "8",
    "LocationId": 8,
    "LocationName": "HI A 442",
    "Documents": null
}, {
    "$id": "9",
    "LocationId": 9,
    "LocationName": "HI  A 443",
    "Documents": null
}, {
    "$id": "10",
    "LocationId": 10,
    "LocationName": "HI A 571/ 574",
    "Documents": null
}, {
    "$id": "11",
    "LocationId": 11,
    "LocationName": "EC 33CF",
    "Documents": null
}, {
    "$id": "12",
    "LocationId": 12,
    "LocationName": "EC 33D",
    "Documents": null
}, {
    "$id": "13",
    "LocationId": 13,
    "LocationName": "EC 81/84",
    "Documents": null
}, {
    "$id": "14",
    "LocationId": 14,
    "LocationName": "WC 142/ 178",
    "Documents": null
}, {
    "$id": "15",
    "LocationId": 15,
    "LocationName": "WC 20/45",
    "Documents": null
}, {
    "$id": "16",
    "LocationId": 16,
    "LocationName": "MP 25/35",
    "Documents": null
} {
    "$id": "33",
    "LocationId": 33,
    "LocationName": "VR 16",
    "Documents": null
}]

服务调用

$scope.docTypes = Type.query(function () { console.log($scope.docTypes) });
$scope.docLocations = Location.query(function () { console.log($scope.docLocations) });

SelectBox

<div class="col-md-4">
        <div class="form-group">
            <select class="form-control" ng-model="search.Location"
                    ng-options="l.LocationName as l.LocationName for l in docLocations">
                {{l.Location}}
            </select>
            <p class="help-block" style="text-align:center">Select Location</p>
        </div>
    </div>

Answer 1

这是一个正在工作的Plunker演示以下技术。

首先：您需要将您在控制器中的位置和push筛选到一个新的数组，该数组将填充您的<select>字段。

$scope.locationsList = [];
angular.forEach($scope.documents, function(documents, key) {
    angular.forEach($scope.locations, function(locations, key) {        
    if (locations.LocationId == documents.LocationId)
      $scope.locationsList.push({id: locations.LocationId,  LocationName: locations.LocationName})
    });
})

第二：您需要过滤掉重复的位置。令人敬畏的angular utils有一个模块就是为了这个目的。按照安装说明将其添加到您的：

var app = angular.module('ngApp', ['ui.utils']);

然后，您可以简单地在ng-options中添加一个独特的过滤器，如下所示：

ng-model="selectedFeature" ng-options="location.LocationId as location.LocationName for location in locationsList | unique: 'LocationName'">

我希望这能有所帮助。