クリックして特定のdivを表示して他のユーザーを隠す方法

Question

AngularJSの新機能4つのボタンを作成しようとしています。ボタンをクリックすると、他の3つのDIVが隠れている特定のdivが表示されます。 はここ

<div class="active"> 
     <button ng-click="a"><h5>Button a</h5></button> 
    </div> 
    <div> 
    <button ng-click="b"><h5>Button b</h5></button> 
    </div> 
    <div><button ng-click="c"><h5>Button c</h5></button> 
    </div> 
    <div> 
    <button ng-click="d"><h5>Button d</h5></button> 
</div> 

<table class="table table-bordered"> 
    <thead> 
    <tr> 
     <th class="browser-icons"></th> 
     <th>Name</th> 
     <th class="align-right">Product ID</th> 
     <th class="align-right">SKU ID</th> 
     <th class="align-right">Seller Panel</th> 
     <th class="align-right">Payment Medium</th> 
     <th class="align-right">Quantity</th> 
     <th class="align-right">Price</th> 
     <th class="align-right">Status</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let item of metricsTableData" ng-if="a"> 
     <td><img class="tableimg" src="{{ (item.image | baAppPicture)}}" width="100" height="100"></td> 
     <td ngClass="nowrap">{{ item.browser }}</td> 
     <td class="align-right">{{ item.visits }}</td> 
     <td class="align-right">{{ item.purchases }}</td> 
     <td class="align-right">{{ item.percent }}</td> 
     <td class="align-right">{{ item.pmedium }}</td> 
     <td class="align-right">{{ item.quantity }}</td> 
     <td class="align-right">{{ item.price }}</td> 
     <td class="align-right">{{ item.status }}</td> 
    </tr> 
    <tr *ngFor="let item of metricsTableData1" ng-if="b"> 
     <td><img class="tableimg" src="{{ (item.image | baAppPicture)}}" width="100" height="100"></td> 
     <td ngClass="nowrap">{{ item.browser }}</td> 
     <td class="align-right">{{ item.visits }}</td> 
     <td class="align-right">{{ item.purchases }}</td> 
     <td class="align-right">{{ item.percent }}</td> 
     <td class="align-right">{{ item.pmedium }}</td> 
     <td class="align-right">{{ item.quantity }}</td> 
     <td class="align-right">{{ item.price }}</td> 
     <td class="align-right">{{ item.status }}</td> 
    </tr> 
    </tbody> 
    </table> 

事前のおかげで、コードです。

Answer 1

あなたが行う必要があります

最初のものは、あなたがメソッドを持っている場合は、それらのNG-クリックすると、あなたのコントローラ/スコープの方法（例えばNGクリック=「C（）」）

を呼び出すために括弧を持っていることを確認であなたのコントローラ/スコープ上でcと呼ばれる値を設定することができます（例えば、現在アクティブなdivの値に設定されたindexというプロパティを持つことができます）。

各divがNG-場合だろうxはdiv要素のインデックスである= "インデックス== X"、。

これは、必要なものを達成する基本的な方法ですが、適切である必要があります。簡単に：

<button ng-click="d()"><h5>Button d</h5></button> 

var d = function() { index = 4; } 
$scope.d = d; 

<div ng-if="index == 4">Shown when button d clicked</div>