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

我有我的应用程序设置产品列表可以通过使用选择输入的颜色进行过滤，我也有$routeprovider这个颜色参数传递给网页，如果它存在于网址中。Angular，使用选择输入过滤器来更新路由？

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

2013-02-06 Tim Webster

选择具有undocumented NG-变化参数，你可以用它来调用一个函数来设置$location.path：

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

控制器：

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

来源

2013-02-06 15:46:37

虽然由于某些原因选择框会恢复为没有选择任何东西而不是所选颜色> –

就像一个魅力一样。在您的控制器中，将$ scope.color设置为路径中的颜色参数。请注意，如果您使用对象数组来生成选择列表，则需要将$ scope.color设置为指向该数组的一个元素。请参阅[本文]（http://stackoverflow.com/questions/14297560/how-to-make-a-preselection-for-a-select-list-generated-by-angularjs）了解更多信息。 –

我使用的产品阵列来填充选择列表，但我也是用这个（下划线）从阵列拉独特的色彩冠军'code' $ scope.uniqueColours =函数（）{ 回报_。链（scope.products $） \t \t .pluck（ 'colour_title'） \t \t .flatten（） \t \t .unique（） \t \t。值（）; \t}; 'code' 所以它不再反映初始产品数组。 s无法设置 $ scope.by_colour = $ routeParams.colour_title; –

你<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或以其他方式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为一个完整的工作示例。

来源

2013-02-06 16:05:29

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

回答

相关问题