如何顯示點擊和隱藏其他人的特定div

-1

AngularJS的新功能。我正在嘗試製作4個按鈕。當用戶點擊按鈕時，會顯示一個特定的div來隱藏其他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>

在此先感謝。

來源

2017-02-27 Gaurav Mehta

也許簡化你的例子？太多與你的問題無關的事情... – Amit

你可以從問題中刪除表格。你試圖隱藏DIV的代碼在哪裏？ – Sravan

，你需要做的第一件事是確保這些NG-點擊的括號來調用你的控制器/範圍（「）C（」例如，NG-點擊=）方法

如果你有一個方法在您的控制器/作用域上調用c可以設置一個值（例如，您可能有一個名爲index的屬性，它被設置爲當前活動的div的值）。

每個div都會有ng-if =「index == x」，其中x是div的索引。

這是實現你所需要的基本方法，但應該是足夠的。簡而言之：

<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>

來源

2017-02-27 13:58:34

如何顯示點擊和隱藏其他人的特定div

回答

相關問題