Как фильтровать ng-опции

Question

Клиент видит все документы на столе. У документов есть свой служебный вызов, у меня есть поля выбора, которые они могут использовать для их фильтрации. Один из вариантов - Location. В базе данных много мест, я не хочу, чтобы все они были доступны, мне нужны только те, которые соответствуют местоположению конкретных документов.

Документы 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 
}] 

Service Calls

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

Второе: Вам нужно отфильтровать повторяющиеся местоположения. У awesome 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'"> 

Я надеюсь, что это помогает.