如何显示点击和隐藏其他人的特定div

Question

AngularJS的新功能。我正在尝试制作4个按钮。当用户点击按钮时，会显示一个特定的div来隐藏其他3个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-点击的括号来调用你的控制器/范围（“）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>