angularjs - Angular，使用选择输入过滤器来更新路由？

Question

我设置了我的应用程序，其中可以使用选择输入按颜色过滤产品列表，$routeprovider如果 URL 中存在此颜色参数，我还可以将其传递给页面。

我现在要做的是在更改选择框时更新 url / 路由。如何将选择的更改绑定到路线？

Answer 1

select 有一个未记录的ng-change 参数，您可以使用它来调用函数来设置$location.path：

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

控制器：

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

Answer 2

您的<select>元素将绑定到带有 的模型ng-model，您可以$watch使用它来更新$location.path或$location.search。就个人而言，我建议使用$location.search: 您可以只更改您想要的参数，并且它的工作量会减少一些，因为您不必了解控制器中的整个路径。

所以假设你有这样的<select>元素：

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

您可以使用$watch来观察您的绑定值并更新您的$location.search，确保将其设置为nullif color is undefinedor else falsey（这将清除搜索参数）：

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

您可能希望在搜索参数和本地模型之间设置双向绑定，以便更改将反映在您的<select>：

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

然后，只需访问$routeParams.color您的路由控制器即可。

有关完整的工作示例，请参阅此plunk。