Góc, sử dụng bộ lọc đầu vào được chọn để cập nhật tuyến đường?

Question

Tôi có ứng dụng được thiết lập nơi danh sách sản phẩm có thể được lọc theo màu bằng cách sử dụng đầu vào được chọn, tôi cũng có $routeprovider chuyển thông số màu này cho trang nếu nó có trong url.

Điều tôi muốn làm bây giờ là cập nhật url/tuyến đường khi hộp chọn được thay đổi. Làm cách nào để liên kết thay đổi của lựa chọn với tuyến đường?

Answer 1

chọn có một tham số undocumented ng-thay đổi mà bạn có thể sử dụng để gọi một chức năng để thiết lập $location.path:

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

Bộ điều khiển:

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

Answer 2

yếu tố <select> của bạn sẽ được ràng buộc với một mô hình với ng-model, bạn có thể $watch và sử dụng để cập nhật $location.path hoặc $location.search. Cá nhân, tôi khuyên bạn nên sử dụng $location.search: bạn có thể thay đổi chỉ cần thông số bạn muốn và công việc của nó ít hơn một chút vì bạn không phải biết kiến ​​thức về toàn bộ đường dẫn trong bộ điều khiển của mình.

Vì vậy, giả sử bạn có một yếu tố <select> như thế này:

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

Bạn có thể sử dụng $watch để xem giá trị ràng buộc của bạn và cập nhật $location.search của bạn, đảm bảo để đặt nó vào null nếu màu sắc là undefined hoặc falsey (điều này xóa thông số tìm kiếm):

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

Bạn có thể muốn thiết lập liên kết hai chiều giữa thông số tìm kiếm và mô hình cục bộ của bạn để thay đổi này sẽ được phản ánh trong <select> của bạn:

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

Sau đó, nó chỉ là vấn đề tiếp cận $routeParams.color trong điều khiển chuyển của bạn.

Xem điều này plunk để có ví dụ hoàn chỉnh.