Question

我是Ionic和Angular开发的新手，现在我的部分离子应用程序遇到了一些麻烦。我有两个页面，一个有一系列下拉选项和一个提交它们的按钮，另一个将接收用户选择的选项，处理它们并输出结果。我无法从下拉菜单中获取值到另一页。

这是下拉列表所在页面的控制器。

.controller('mainCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, PassDay) {
$scope.test1 = "tuesday";
$scope.start = "school"
$scope.end = "mall"
}])

这是我希望值转到的页面的控制器。我想在加载时将它们分配给此页面中的相应变量。

.controller('timesCtrl', ['$scope', '$stateParams', // The following is the constructor function for this page's controller. See https://docs.angularjs.org/guide/controller
// You can include any angular dependencies as parameters for this function
// TIP: Access Route Parameters for your page via $stateParams.parameterName
function ($scope, $stateParams, PassDay) {
$scope.day = "tuesday";
$scope.start = "school";
$scope.end = "town";

我的印象是我需要工厂或服务来做这件事，但我不知道如何让它发挥作用。每次我尝试使用任何工厂时它都会崩溃应用程序。

app.factory('PassDay', function(){
    return 1;
});

这是来自页面的HTML，下拉选择

<form id="form1" class="list">
            <label class="item item-select" id="select3">
                <span class="input-label">Choose Day</span>
                <select ng-model="test1">
                    <option value="tuesday">Tuesday</option>
                    <option value="friday">Friday</option>
                    <option value="saturday">Saturday</option>
                </select>
            </label>
            <label class="item item-select" id="select1">
                <span class="input-label">Start Location</span>
                <select ng-model="start">
                    <option value="school">school</option>
                    <option value="mall">Mall</option>
                    <option value="train">Train Station</option>
                    <option value="amc">AMC Movies</option>
                    <option value="mall2">Mall2</option>
                    <option value="pav">Pavilion</option>
                    <option value="market">Market Fair</option>
                    <option value="town">town</option>
                </select>
            </label>
            <label class="item item-select" id="select2">
                <span class="input-label">Destination</span>
                <select ng-model="select.end">
                    <option value="mall">Mall</option>
                    <option value="school">school</option>
                    <option value="train">Train Station</option>
                    <option value="amc">AMC Movies</option>
                    <option value="mall2">Mall2</option>
                    <option value="pav">Pavilion</option>
                    <option value="market">Market Fair</option>
                    <option value="town">town</option>
                </select>
            </label>
        </form>

Answer 1

首先，您必须为timesCtrl编写正确的路线。

 $state.when("times",
    url: "/times/:day/:start/:end', // Passing state parameters
    templateUrl: 'templates/times.html', // Times template url,
    controller: 'timesCtrl'
 })

然后按如下方式编写控制器

.controller('mainCtrl', ['$scope', '$window', function ($scope, $window) {
  $scope.test1 = "tuesday";
  $scope.start = "school"
  $scope.end = "mall"

  $scope.showTimesPage = function() {
    $window.location.href = "#/times/" + $scope.test1 + "/" + $scope.start + "/" + $scope.end
  };
}])

.controller('timesCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
  $scope.day = $stateParams.day;
  $scope.start = $stateParams.start;
  $scope.end = $stateParams.end;
})

点击按钮时调用功能

使用angularJS在Ionic应用程序中传递两页之间的值

1 个答案: