Angular使用选择输入过滤器更新路由的问题出现的原因是需要将一个<select>元素绑定到一个带有ng-model的模型，然后根据选择的值更新路由的路径或查询参数。解决方法是使用$watch来监听绑定的值的变化，并根据变化的值更新$location.search。同时，还可以设置双向绑定，使搜索参数和本地模型之间的改变能够在<select>中反映出来。最后，在路由的控制器中可以通过$routeParams.color来访问路由参数。以下是具体的代码实现：

// 监听绑定的值的变化，并根据变化的值更新$location.search
$scope.$watch('selectedColor', function (color) {
    if (color) {
        $location.search('color', color); 
    } else {
        $location.search('color', null);
    }
});
// 设置双向绑定，使搜索参数和本地模型之间的改变能够在中反映出来
$scope.$watch('$location.search().color', function (color) {
    $scope.selectedColor = color;
});


通过以上代码实现了选择输入过滤器更新路由的功能。可以点击以下链接查看完整的工作示例：[plunk](http://plnkr.co/edit/b6QuquIC8X1xCduLUnAI)
									
				

									
			
			
0
		
	

											

	

		

			

								
									
			
			

				

					

						
							匿名的						

                        
                            Posted 2023年8月8日                        

						

														0 Comments						
					
					

															
				
				

										
问题的出现原因是select选项框在使用ng-options指令生成选项时，需要将ng-model初始化为ng-options指令中的数组的元素之一。在这个问题中，ng-model被设置为$scope.color，但是在生成select选项时，ng-options使用的是$scope.products数组，因此需要将$scope.color设置为$scope.products的一个元素。
解决方法是在控制器中循环遍历$scope.products数组，找到对应的元素，然后将$scope.color设置为该元素。
具体代码如下：

function MyCtrl($scope, $location) {
  $scope.updatePath = function() {
    $location.path(... use $scope.color here ...);
  }
  // Find the appropriate element in $scope.products and set $scope.color
  angular.forEach($scope.products, function(product) {
    if (product.colour_title === $routeParams.colour_title) {
      $scope.color = product;
    }
  });
}


这样，问题就可以正确解决了。
									
				

									
			
			
0
		
	

					
							

		

								




		

		

				用户名或电子邮箱地址
				
			

				密码
				
			

				
				
			
		

			    
			

				注册
			
			    
			

				Lost Password