Question

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

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

Answer 1

select有一个undocumented 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，如果颜色为null或其他方式为假，请务必将其设置为undefined（此清除搜索参数）：

$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。

Angular，使用select输入过滤器来更新路由？

2 个答案: