2016-07-18 15 views
1

私はイオンプログラミングを進めているので、私はこの問題を見つけ出しました。私はこの問題を解決する方法がわかりません。事は、私は、ヘッダーに表示したいということである(または好ましくはサブヘッダ上)この:'next'オプション付きイオンナビビュー

<昨日TODAY明日>

ので、ユーザーは、今日のページにアプリを起動し、以前にナビゲートすることができますし、次の日(それはカレンダーのようなアプリです)。私は「昨日」と「明日」の2つのボタンを使ってこれを行い、コントローラーを使ってページの変更時にボタンとタイトルのテキストを変更することを計画していました。それにもかかわらず、私はイオン・ナビゲー・ビューを見つけ出して、どうにかして私が望む振る舞いを模倣することができるかどうか疑問に思っていました。それは、バックオプションを含むが、前方のオプションを含まない...質問は、これを行うことができますか?私はここで試しているような誰かが何かを管理していますか?

ありがとうございます。

ホセ

答えて

1

ここに私が到達した解決策を示すコードがあります。それは私のために働く。

HTML:

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>My App</title> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <link rel="stylesheet" href="style.css"> 
    <link href="http://code.ionicframework.com/1.1.0/css/ionic.min.css" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"> 

    <!-- ionic/angularjs js --> 
    <script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script> 

    <script src="script.js"></script> 
</head> 

<body> 

    <div ng-controller="MyCtrl"> 
    <div align-title="center" class="bar bar-header bar-stable"> 
     <button class="button button-clear ">Menú</button> 
     <button class="button button-clear">Right</button> 
    </div> 
    <div class="bar bar-subheader"> 
     <button class="button icon-left button-clear button-dark" ng-hide="hidePrevious" ng-click="previousDay()"><i class="icon ion-chevron-left"></i> {{previousDayTitle}} </button> 
     <h1 class="title"><span style="font-size:35px"> {{todayTitle}} </span></h1> 
     <button class="button icon-left button-clear button-dark" ng-hide="hideNext" ng-click="nextDay()"> {{nextDayTitle}} <i class="icon ion-chevron-right"></i></button> 

    </div> 
    <ion-content class="has-header has-subheader">jjjh sss 
     <br> sasas asasa 
     <br> sasas 
    </ion-content> 
    <!--<div class="bar bar-footer bar-balanced"> 
     <ion-checkbox ng-model="isChecked">Programa</ion-checkbox> 
     <ion-checkbox ng-model="isChecked">Alternativo</ion-checkbox> 
     <ion-checkbox ng-model="isChecked">Taurina</ion-checkbox> 
    </div>--> 
    </div> 


</body> 

</html> 

JS:

angular.module('myApp', ['ionic']) 

.controller('MyCtrl', function($scope) { 
    $scope.title = 'Ionic'; 

    // 20 August - 27 August, both included 
    firstFairDay = new Date(2016, 7, 20); 
    lastFairDay = new Date(2016, 7, 27); 

    now = new Date(2018, 1, 1); 

    weekDays = ['Dom', 'Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb']; 

    if (now.getTime() >= lastFairDay.getTime()) { 
    $scope.hidePrevious = false; 
    $scope.hideNext = true; 
    now = new Date(lastFairDay); 
    todayDayOfWeek = weekDays[now.getDay()]; 
    todayDayNumber = now.getDate(); 
    $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1); 
    } else if (now.getTime() <= firstFairDay.getTime()) { 
    $scope.hidePrevious = true; 
    $scope.hideNext = false; 
    now = new Date(firstFairDay); 
    todayDayOfWeek = weekDays[now.getDay()]; 
    todayDayNumber = now.getDate(); 
    $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1); 
    } else { 
    $scope.hidePrevious = false; 
    $scope.hideNext = false; 
    todayDayOfWeek = weekDays[now.getDay()]; 
    todayDayNumber = now.getDate(); 
    $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1); 
    $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1); 
    } 

    $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber; 

    $scope.previousDay = function() { 
    if (now.getTime() === firstFairDay.getTime()) { 
     // Do nothing 
    } else { 
     now.setDate(now.getDate() - 1); 
     todayDayNumber = now.getDate(); 
     todayDayOfWeek = weekDays[now.getDay()]; 

     if (now.getTime() === firstFairDay.getTime()) { 
     $scope.hidePrevious = true; 
     $scope.hideNext = false; 
     $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber; 
     $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1); 
     } else { 
     $scope.hidePrevious = false; 
     $scope.hideNext = false; 
     $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1); 
     $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber; 
     $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1); 
     } 
    } 
    }; 

    $scope.nextDay = function() { 
    if (now.getTime() === lastFairDay.getTime()) { 
     // Do nothing 
    } else { 
     now.setDate(now.getDate() + 1); 

     todayDayNumber = now.getDate(); 
     todayDayOfWeek = weekDays[now.getDay()]; 

     if (now.getTime() === lastFairDay.getTime()) { 
     $scope.hidePrevious = false; 
     $scope.hideNext = true; 
     $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1); 
     $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber; 
     } else { 
     $scope.hidePrevious = false; 
     $scope.hideNext = false; 
     $scope.previousDayTitle = weekDays[(((now.getDay() - 1) % 7) + 7) % 7] + " " + (todayDayNumber - 1); 
     $scope.todayTitle = todayDayOfWeek + " " + todayDayNumber; 
     $scope.nextDayTitle = weekDays[(((now.getDay() + 1) % 7) + 7) % 7] + " " + (todayDayNumber + 1); 
     } 
    } 
    }; 



}); 

乾杯

+0

あなたが解決策を見つけたと聞いてうれしいです。あなたのためにアップ;) – trungk18

1

@kankamuso:イオン2については 、次のコマンドにより、タブテンプレートを使用して新しいプロジェクトを作成しようとすることができます。イオン1の場合http://ionicframework.com/docs/v2/components/#tabs

からより

ionic start tabProject tabs --v2 

読む、こちらをご参照ください。 http://ionicframework.com/docs/api/directive/ionTabs/

+0

trungj18 @おかげではなく、タブ付きページに制限された空間ではありません?。私は、8つのタブに、それぞれ曜日と月の数字で構成されたテキストタイトルを追加する必要があります...また、現在の要素を中央に配置したい(選択した日)... – kankamuso

+0

私はそれを考えると思いますデバイスの幅が8つのタブメイトを持つには不十分であるためです:D 8つのタブにアーカイブを拡張する場合は、ラジオボタンまたはチェックボックスを試すことができますhttp://ionicframework.com/docs/components/#radio-buttons – trungk18

+0

I私の問題を解決できないのではないかと恐れています。多くのページをナビゲートするモードが必要で、バーの中央にあるものがコンテンツスペースに表示されます。 – kankamuso

関連する問題