ブートストラップAngularJS ulがない場合ulを隠す

Question

liまたは可視のliがない場合、navbar-nav ulを非表示にするには、ng-hideまたはng-if（つまりコントローラ内ではなく要素内）を使用する方法がありますか？

おそらくこれは、表示するものがないので、トグルボタンを隠すように拡張することもできます。

現在、リスト項目がない場合でも、ナビバーを切り替える（上下にスライド）ことができ、うまく見えません。

私はNGリピートとしなければならなかった見た他の質問の大半は、

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav" id="navbar-nav"> 
     <li class="active hidden-xs"> 
      <a href="#">Home</a> 
     </li> 
     <li class="hidden-xs"> 
      <a href="#products">Products</a> 
     </li> 
     <li class="hidden-xs"> 
      <a href="#overview">Overview</a> 
     </li> 
     </ul> 
    </div> 
    <!--/.nav-collapse --> 
    </div> 

JSFiddle

Answer 1

は、私たちがここに触れる必要がいくつかあります。 1つは、角度を使用する理由のすべてが、ビューを操作/ポピュレートするためのデータバインディングを行うことです。あなたは何かをチェックするためにng-if/ng-show/ng-hideのために何かを持っている必要があると言われている。コントローラーには、ビューを操作できるように情報が入っていなければなりません。だから我々は、メニューリストの項目を格納するための変数を持つコントローラ作成することになるでしょう。この場合には：

app.controller('navCtrl', function(){ 
    this.menuItems = [ 
    { name: 'Home', href: '' }, 
    { name: 'Products', href: '' }, 
    { name: 'Overview', href: '' } 
    ]; 
}); 

を今これが行われていることを我々はNAVにバインドする必要があります。

<div ng-controller="navCtrl as nav" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> .... </div>

次li項目はあなたがul

<ul class="nav navbar-nav"> 
    <li ng-repeat="navItem in nav.menuItems"> 
    <a ng-href="{{ navItem.href }}">{{ navItem.name }}</a> 
    </li> 
</ul> 

を取り込むことができるように彼らに ng-repeatを持っている必要がありますNAV

あなたはあなたが求めていることをやり始めることができます。単にNAV項目があるかどうかを確認ng-ifを追加：

あなたはまた、トグルメニューでこれを行うことができ

<ul class="nav navbar-nav" ng-if="nav.menuItems.length > 0"> ... </ul> 

：コントローラmenuItemsは空の配列this.menuItems = []であれば、今

<button ng-if="nav.menuItems.length > 0" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> ... </button> 

ulとbuttonは作成されません。

私はポイント＃2につながります。これが妥当な唯一の方法は、serviceまたはAPIコールを使用してメニューアイテムを作成する場合、またはナビアイテムを動的に作成/削除できる場合です。コントローラーで配列をハードコーディングして操作していない場合は、値が存在することがわかりますが、これは理由がありません。

この実装の最後のポイントは、この実装ではliからclass="hidden-xs"を削除することです。ビューポートが存在する場合でも、ビューポートがxsの場合でもナビアイテムは表示されません。ここで

は完全な実装をチェックアウトするフィドルです： http://jsfiddle.net/9shaakw9/2/

は、この情報がお役に立てば幸い！