Angularjs 如何筛选ng选项

Angularjs 如何筛选ng选项,angularjs,Angularjs,客户可以看到桌子上的所有文档。文档有自己的服务调用,我有选择框,它们可以用来过滤它们。其中一个选项是位置。数据库中有很多位置,我不希望所有位置都可用,我只希望与这些特定文档的位置匹配的位置 文档JSON [{ "$id": "1", "DocumentId": 75, "DocumentDate": "2015-01-31T22:00:00", "DocumentUrl": "/Files/Black Elk-Invoices-None-January 2015.

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

文档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) });
选择框

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

{{l.Location}
选择位置

下面是一个演示以下技术的作品

首先:您需要筛选控制器中的位置,并将
推送到填充
字段的新数组中

$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})
    });
})
第二步:您需要过滤掉重复的位置。awesome有一个模块就是为了这个目的。按照安装说明将其添加到您的:

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

然后,您只需在
ng选项中添加一个唯一的过滤器,如下所示:

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

我希望这会有所帮助。

请澄清:您是否试图使用一个select输入筛选表中的所有文档,该输入仅列出一个位置(如果该位置由一个或多个文档列出)?正确。我不想给用户比他需要的更多的选择