弹出一个临时窗口，在AngularJS中单击元素旁边的按钮

debugcn 发表于 Dev

戴维多夫

我有一个页面（使用Bootstrap和AngularJS），其中包含同一按钮的多个实例，每个实例都与该按钮旁边的特定元素相关。

我想实现一个临时窗口，当我单击其中一个实例时，该窗口将立即弹出，并包含许多按钮。

例如，想象一个包含数据的表，每个记录显示不同的状态，因此将提供的选项将取决于记录的状态。同样，在每个记录的右侧，都有一个按钮，可以访问该记录上的可能操作。每当我单击按钮时，都需要在单击的按钮旁边显示一个小窗口，以显示适用的操作（例如，“删除”，“激活”，“退出”等）。

临时窗口的大小将根据显示的按钮数量进行调整。

戴维多夫

我找到了一个不错的解决方案（至少，它非常符合我的需求）。这是一个引导程序下拉按钮，可以在其中嵌入动态按钮列表（同样，取决于我的示例中记录的内容）。

因此，HTML看起来像：

<div class="btn-group">
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Action
    </button>
    <div class="dropdown-menu">
        <button ng-if="Delete"   type="button" class="btn btn-warning" ng-click="Delete($index)"   aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Delete  </font></button>
        <button ng-if="Retire"   type="button" class="btn btn-warning" ng-click="Retire($index)"   aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Retire  </font></button>
        <button ng-if="Activate" type="button" class="btn btn-warning" ng-click="Activate($index)" aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Activate</font></button>
        <button ng-if="Promote"  type="button" class="btn btn-warning" ng-click="Promote($index)"  aria-haspopup="true" aria-expanded="false" style="width:100px"><font size="3">Promote  </font></button>
    </div>
</div>

感谢那些发表建议的人。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。