2016-11-17 15 views
1

私はIonicとAngularの開発に慣れていません。私はイオンアプリケーションの一部で少し問題があります。私は2つのページを持っています.1つは一連のドロップダウン選択とそれらを送信するボタン、もう1つは選択した選択肢を受け取り、処理して結果を出力します。ドロップダウンから他のページへの値の取得に問題があります。angularJSを使用したIonicアプリケーションの2ページ間の値の受け渡し

これは、ドロップがダウンしているページからコントローラです。

.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がダウンしてあなたがtimesCtrlのための適切なルートを記述する必要が

<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> 
+0

ボタンクリックで関数を呼び出します。 Localstorage .make fiddleかpenがチェックされます – Anuj

答えて

1

最初に選択されます。

.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; 
}) 

を次のように

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

次にコントローラを書いて、工場のようないくつかのオプションがあります

関連する問題