は、ページ上に特定のタブのみを表示しています。AngularJS

共通のindex.htmlページが必要です。ここには、すべてのテンプレートのHTMLとメニュータブへのリンクがあります。ユーザーがクリックしたタブに応じて、特定のタブのみを表示したい。 3つのメニューバータブ、1.ログイン2.レジスタ3.映画は、ページ上に特定のタブのみを表示しています。AngularJS

がある場合、私はしてたときにのみ、ユーザがログインを映画]タブを表示するとします。

は、ここに私が持っているサンプルのindex.htmlです。

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

<head> 
    <!-- bower:css --> 
    <!-- endinject --> 

    <!-- vendor:css --> 
    <!-- endinject --> 

    <!-- inject:css --> 
    <!-- endinject --> 

    <!-- app:css --> 
    <!-- endinject --> 
</head> 

<body class="main"> 
<header> 
    <ul class="nav nav-pills"> 
     <li><a href="#/movies">Movies</a></li> 
     <li><a href="#/login">Login</a></li> 
     <li><a href="#/register">Register</a></li> 
    </ul> 
</header> 

<section ng-view> 


</section> 

<!-- bower:js --> 
<!-- endinject --> 

<!-- vendor:js --> 
<!-- endinject --> 

<!-- inject:js --> 
<!-- endinject --> 

<!-- app:js --> 
<!-- endinject --> 
</body> 

</html>

ユーザーの選択を確認するコントローラを使用しようとしましたが、動作しません。

ご協力いただければ幸いです。

出典

2016-05-04 vishwanath jayanth

コントローラコードを教えてもらえますか？ – Giri

ここで私は、コントローラの '（関数（）{ VARアプリ= angular.module（ 'て、myApp'、[]）; app.controller（ 'TabController'、関数（）{ this.tab = 1; this.setTab =関数（tabId）{ this.tab = tabId; }; this.isSet =関数（tabId）{ 戻りthis.tab === tabId; }; }）;} ）（）; ' –

これは？ $ scope.tabを使用する必要があります。適切な実装を指示するために、Angular docsを読んでください。 Angularは2ウェイバインドを使用しているため、この問題に別の方法でアプローチする必要があります。 – Giri

表示するために、3つの異なるフラグを作成しますタブを非表示にします。そのフラグの値をユーザの選択に従って更新する。例えば

、

ヘッダタグの1つのナビゲーションコントローラを作成します。
このコントローラでは、3つの異なるフラグを作成し、デフォルト値を割り当てます。 var displayLoginTab=true; var displayRegisterTab=false; displayMovieTab=false;

は、次にナビゲーションコントローラ変数にアクセスしたり、他のコントローラとの放送から変数を更新するために、他のコントローラの試みから、

<header ng-controller="navigationController"> <ul class="nav nav-pills"> <li ng-if="displayMovieTab"><a href="#/movies">Movies</a></li> <li ng-if="displayLoginTab"><a href="#/login">Login</a></li> <li ng-if="displayRegisterTab"><a href="#/register">Register</a></li> </ul> </header>

私たちは、このために別のコントローラを使用しているため、上記のように、あなたのhtmlを変更すること更新。そのブロードキャストイベントをnavigationControllerでリッスンし、その変数値を更新します。

出典

2016-05-04 05:41:41

これは最高の答えです。本当にありがとう。私はこの問題を解決しました。 :) –

ユーザーがuserDataをチェックすることにより、Inをログに記録されているかどうかログインに成功ストア後userDataとして、そしてあなたのコントローラのチェックでサービス中のデータをuがデータでログインしているユーザーを格納するためのサービスを使用する必要があり、この、を達成するために、は、真または偽その逆としてshowTab変数を設定して、タブ... ノート表示または非表示にするビューでこの変数を使用します。コードを追加していないが...このため

出典

2016-05-04 05:38:22

は、ページ上に特定のタブのみを表示しています。AngularJS

答えて

関連する問題