Kątowy, używając filtra wejściowego wybierz, aby zaktualizować trasę?

Question

Mam ustawioną aplikację, gdzie listę produktów można filtrować według koloru za pomocą wejścia wyboru, mam też $routeprovider przekazujący ten parametr koloru do strony, jeśli jest obecny w adresie URL.

Co chcę teraz zrobić, to zaktualizować adres/trasę, gdy pole wyboru zostanie zmienione. Jak powiązać zmianę wyboru z trasą?

Answer 1

wybierz ma parametr undocumented ng-zmiany, które można wykorzystać do wywołania funkcji, aby ustawić $location.path:

<select ... ng-model="color" ng-change="updatePath()"> 

Kontroler:

function MyCtrl($scope, $location) { 
    $scope.updatePath = function() { 
     $location.path(... use $scope.color here ...); 
    } 
} 

Answer 2

Twój <select> element będzie zobowiązany do modelu z ng-model, którego można użyć do aktualizacji lub $location.search. Osobiście sugeruję użycie $location.search: możesz zmienić tylko żądany parametr, a jego nieco mniej pracy, ponieważ nie musisz znać całej ścieżki w kontrolerze.

Więc zakładając, że masz <select> elementu takiego:

<select ng-model="selectedColor" ng-options="color for color in colors"> 

Można użyć $watch oglądać swoją wartość związanego i zaktualizować $location.search, upewniając się, aby ustawić go na null jeśli kolor jest undefined lub w inny sposób falsey (to wyczyści parametr wyszukiwania):

$scope.$watch('selectedColor', function (color) { 
    if (color) { 
     $location.search('color', color); 
    } else { 
     $location.search('color', null); 
    } 
}); 

Możesz chcieć ustawić dwukierunkowe powiązanie między parametrem wyszukiwania a modelem lokalnym, aby Zmiany będą widoczne w Twoim <select>:

$scope.$watch('$location.search().color', function (color) { 
    $scope.selectedColor = color; 
}); 

Wtedy to tylko kwestia dostępu $routeParams.color w swojej kierowane kontrolera.

Zobacz ten plunk, aby uzyskać pełny przykład pracy.