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) });

选择框

<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-ui/ui-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'">

我希望这会有所帮助。

如何过滤ng-options

1 个答案: