Question

我要求从一个页面上的ng-option下拉列表中传递当前选定的选项，并将其作为另一页面上ng-option下拉列表的默认选项。

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

在控制器1上，我有：

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

这会填充初始下拉列表并使其成为＆＃39;默认选项。

我还有以下代码，它将所选选项保存到$ cookieStore：

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

在Controller 2上，我有以下代码获取$ cookieStore值：

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

$ scope.selectType.name返回先前选择的选项名称。但我无法弄清楚如何将其与新的下拉列表相匹配，并将其作为下拉列表的默认选择。

并且ng-option似乎不允许你将Angular分配给每个选项的值拉到另一个控制器上使用，所以我无法匹配。

Answer 1

我建议有一个用来填充select的工厂。然后使用手表监视选择的值，并在更改时更新工厂。然后使用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指向预定义的值，否则您的选择将从下拉列表中的一个丑陋的空选项开始。

将选择选项传递给新页面

2 个答案: