在表格刷新时保持行上的下拉列表答案

【问题标题】：Sustain dropdown on row while table refreshes在表格刷新时保持行上的下拉列表
【发布时间】：2015-06-30 09:33:03
【问题描述】：

我有一个每隔几秒刷新一次的表格。在每一行上，我都有一个下拉菜单（来自 ui.bootstrap），它允许用户对该行执行操作。

问题是，从数据库中获取新数据后，如果下拉菜单打开，它就会关闭。这对用户来说很烦人。

我最初确实只是在行上有单独的按钮来执行操作，但我可以看到操作列表可能会增加，所以想移动到下拉列表。

    <tbody ng-repeat="item in items">
        <tr>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <div class="btn-group" dropdown>
                    <button type="button" class="btn btn-sm btn-primary">Action</button>
                    <button type="button" class="btn btn-sm btn-primary" dropdown-toggle>
                        <span class="caret"></span>
                        <span class="sr-only">Split button!</span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li><a>Edit</a>
                        </li>
                        <li><a href="#">Delete</a>
                        </li>
                        <li><a href="#">Something else here</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
    </tbody>

我做了一个 plunkr 来演示 here，可能比胡扯更容易！如果您单击下拉菜单并等待几秒钟，您会看到它消失了。

非常感谢任何建议。

编辑：感谢 Denocle 的回答，这里...plunkr

...而且我在不使用 DOM 中的 ID 的情况下稍微改进了他的方法，这里...plunkr

感谢您的帮助和cmets。

【问题讨论】：

你能做到这样当下拉菜单打开时表格不会刷新吗？还是需要一直更新数据？
您好，数据经常更改，因为它通过工作流跟踪大量项目，因此理想情况下希望它在所有情况下都保持更新。这是一个我可以调查的选项。我拥有的其他选项仅在该行的数据发生更改时更新该行，或者在之外有一个操作菜单并且它作用于当前突出显示的行。只是想知道是否有办法先这样做。
行数也变了吗？

// Method for saving and restoring the correct dropdown api.saveOpenBtnGroup = function() { this.openBtnGroupItemId = null; var openBtnGroup = document.getElementsByClassName('btn-group open'); if (openBtnGroup.length > 0) { this.openBtnGroupItemId = openBtnGroup[0].getAttribute('data-item-id'); } } api.restoreOpenBtnGroup = function() { if (this.openBtnGroupItemId !== null) { var btnGroup = document.querySelectorAll('[data-item-id="' + this.openBtnGroupItemId + '"]'); if (btnGroup.length == 1) { console.log(btnGroup[0].className); btnGroup[0].className = btnGroup[0].className + ' open'; console.log(btnGroup[0].className); } } }

function getItems() { $scope.i++; console.log("refresh"); //$scope.items = api.getStuff(); angular.forEach($scope.items, function(item){ item.age = Math.floor((Math.random() * 100) + 1); }) }