Question

我在StackOverFlow上搜索得很透彻，但没找到答案，所以我会在下面提问。

我有一个带下拉菜单的表单。如果用户单击一个按钮，它将把它带到一个新的html页面，其中包含更多信息要填写。但是，如果我为两个页面的表单使用相同的控制器，如何将数据从下拉菜单传递到下一页并自动填充选定选项的相同下拉菜单？

var app = angular.module('myApp', []);

var currentEquipmentType = "";

app.controller('myController', ['$scope', function($scope) {
  $scope.addEquipment.type = "";
  $scope.addEquipment.name = "";
  
  $scope.typeList = ['A', 'B', 'C', 'D'];
  
  //trying to get this info passed onto the next page.
  if (sessionStorage.type) {
    currentEquipmentType = sessionStorage.type;
  }
  
  $scope.getEquipmentInfo = function() {
    if ($scope.addEquipment.name !== undefined) {
      sessionStorage.name = $scope.addEquipment.name;
      sessionStorage.type = $scope.addEquipment.type;
    
    } else {
      // warning message
    }
  }

}]);

<input type="text" ng-model="addEquiment.name">

<select ng-model="addEquipment.type" ng-options="type for type in typeList">
  <option value="" selected="selected">Please select a type.</option>
</select>

<!-- on the next page (different html file, but uses the same controller as the previous page) -->

<!-- more form inputs here -->

<select ng-model="addEquipment.type" ng-options="type for type in typeList">
  <option>NEED THE OPTION SELECTED FROM PREVIOUS PAGE</option>
</select>

Answer 1

你可以很好地使用指令并为两个下拉菜单设置相同的模板，例如，每个元素都有属性select-box将填充此模板：

var app=angular.module('myApp', []);
app.directive("selectBox", function() {
    return {
        restrict: 'A',
        template :'<select ng-model="addEquipment" ng-options="type for type in typeList"><option value="">Please select a type.</option></select>',
        link: function(scope, elem, attrs) {
        scope.typeList = ['A','B','C','D'];
      }
    };
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" >
  <div select-box></div>
</div>

Answer 2

服务解决方案：

在AngularJS应用程序中保留数据的一种方法是在服务（或工厂）中。服务是单例，因此只要您不刷新页面，它们就会保留数据。

app.service('YourService', function() {
    let yourDataFromPreviousPage = {
      page: 1,
      // currentEquipmentType: '',
      // properties can be added later from controllers when you have them resolved.
    };

    function yourData() {
       return ['A','B','C','D'];
    }

    angular.extend(this,{
       yourData,
       yourDataFromPreviousPage
    });

});

然后只需在您的指令中注入服务，就可以从那里获取/设置服务变量。

有关服务的更多信息：

https://docs.angularjs.org/guide/services

服务和工厂之间的比较真的很好：

https://toddmotto.com/factory-versus-service

UI-ROUTER SOLUTION

另一种方法是使用ui-router来跟踪你的路线状态 - 我会推荐这种方法，因为它现在是SPA应用程序的事实标准。您可以为不同的页面设置路由，当您切换到不同的页面状态时，您可以加载不同的参数。

您可以使用以下方式在州之间传递对象：

$state.go('yourstate', { 
  // your object properties
});

有关ui-router的更多信息：

https://github.com/angular-ui/ui-router/wiki/Quick-Reference

本地存储

你在之前的评论中已经涵盖了这一点。

AngularJS-自动填充下拉列表，包含上一页的信息

2 个答案: