2016-09-02 3 views
0

クリックして、私は、ナビゲーションバーに角度非表示内容は、私は、角を持つシンプルなアプリを作るためにしようとしています

<body ng-controller="MainCtrl"> 

    <div class="navbar-fixed "> 
     <nav> 
      <div class="nav-wrapper teal lighten-1"> 
       <a href="#" class="brand-logo center waves-effect waves-light" ng-click="template='home.html'"><i class="material-icons">dashboard</i></a> 
       <ul class="left"> 
        <li class="waves-effect waves-light"><a href="#" ng-click="template='discover.html'"><i class="material-icons">search</i></a> 
       </ul> 
       <ul class="right"> 
        <li class="waves-effect waves-light"><a href="#" ng-click="template='profile.html'"><i class="material-icons">perm_identity</i></a> 


       </ul> 
      </div> 
     </nav> 
    </div> 

<div ng-hide> 
<H1> must not show</H1> 
</div> 

    <div ng-include="template"> 

    </div> 
</body> 

メインコントローラをリンクをクリックしたときにコンテンツを非表示にする方法を見つけ出すように見えることはできません。

var app = angular.module('Testing', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
}); 


var classApp = angular.module('classApp', []); 

classApp.controller('classCtrl', function ($scope) { 
    $scope.isActive = false; 
    $scope.activeButton = function() { 
    $scope.isActive = !$scope.isActive; 
    } 
}); 

ミドルロゴをクリックすると、この場合の本文のコンテンツを「表示しない」が非表示になり、私がボディに使用しているテンプレートが表示されます。ありがとう

答えて

1

いくつかのスコープ変数に可視性をバインドする必要があります。表示するためにあなたが使用することができます:

<a href="#" class="brand-logo center waves-effect waves-light" ng-click="showTemplate('home.html', true)"><i class="material-icons">dashboard</i></a> 

を隠すために使用することができます:あなたのコントローラで

<li class="waves-effect waves-light"><a href="#" ng-click="showTemplate('discover.html', false)"><i class="material-icons">search</i></a> 

あなたのような機能showTemplateを定義します。この機能で

$scope.showTemplate = function(templateName, hideContent) { 
    $scope.template = templateName; //template to show 
    $scope.hideSection = hideContent; //true or false to hide/show the content 
} 

あなたが目に見えるセットテンプレートとあなたはどのようにいくつかの他のセクションを非表示にします。 そして、あなたはhideSection変数に非表示にするセクションバインドする必要があります:私は表示するには、リンクをクリックしたときに、私はすでにNGクリックを消費しています

+0

を動作しませんバインドされた変数せずに一人で

<div ng-hide="hideSection"> <H1> must not show</H1> </div> 

ng-hideをテンプレート、どういうわけかこれら2つを組み合わせることはできますか?私はその部分を隠し、テンプレート/コンテンツを表示したい。 – Nex

+0

申し訳ありません新しい角度になっています。このようなナビゲーションバーのリンクをクリックすると、ハイライトされたテキストが非表示になります。 https://i.gyazo.com/9960ebe595ef7aa8d03596ef801faa58.gif – Nex

+0

それを行うには、ナビゲーションリンクをクリックします。ng-includeでテンプレートを表示できますが、クリックするとng-hide = "hideSection"が隠されますが、テンプレートは表示されます。 – Nex

関連する問題