将选择选项传递到新页面

Question

我需要从一个页面上的 ng-option 下拉列表中传递当前选择的选项，并使其成为另一页面上 ng-option 下拉列表的默认选择。

我可以将选定的选项保存到 $cookieStore 并将其传递到下一页。但我无法将其设为新页面下拉菜单中的预选默认选项。

在控制器 1 上，我有：

$scope.selectType = [
{ name: 'a' },
{ name: 'b' },
{ name: 'c' },
{ name: 'd' } ] 
$scope.preSelectTypes = $scope.selectType[0]

这会填充初始下拉菜单并使“a”成为默认选项。

我也有下面的代码，它将选择的选项保存到$cookieStore：

$cookieStore.put('abe', $scope.preSelectTypes)

在控制器 2 上，我有以下获取 $cookieStore 值的代码：

$scope.selectType = $cookieStore.get('abe')

$scope.selectType.name 返回之前选择的选项名称。但我不知道如何将它与新的下拉菜单匹配并使其成为下拉菜单的默认选择。

而且 ng-option 似乎不允许您提取 Angular 分配给每个选项的值以在另一个控制器上使用，所以我无法匹配。

Answer 1

我建议有一个用于填充选择的工厂。然后使用手表监视选择的值，并在更改时更新工厂。然后使用 selectFactory 值在控制器中为您的第二个视图设置值。

angular.module('myapp', []).controller('myController', function($scope, selectFactory) {
  $scope.selectModel = selectFactory.selectValue;

  $scope.$watch($scope.selectModel, function() {
    selectFactory.selectValue = $scope.selectModel;
  });
});

angular.module('myapp').controller('mySecondController', function($scope, selectFactory) {
  $scope.selectModel = selectFactory.selectModel;
});

angular.module('myapp').factory('selectFactory', function() {
return {
  selectValue: null
};
});

Answer 2

您可能在第二页的 select 元素上使用了 ng-model，在这种情况下，您可以使用以下代码：

$scope.ngModelProperty = $scope.selectType

如果您需要 ng-model 和 selectType 变量位于不同的范围内，这会稍微复杂一些，但 $scope 服务可以轻松管理它。无论如何，您通常都希望 ng-model 指向预定义的值，否则您的选择会从下拉列表中的丑陋空选项开始。