table 刷新时保持行下拉

Question

我有一个 table 每隔几秒刷新一次。在每一行上，我都有一个下拉列表（来自 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 中略微改进了他的方法，这里...plunkr

感谢您的帮助和评论。

Answer 1

只要您的所有行都有唯一的 ID，就可以在刷新之前保存打开下拉列表的行的 ID，然后在数据更新到将 "open" class 添加到该行的 btn 组。

我在这里用一个工作示例分叉了你的演示：http://plnkr.co/edit/6vwBnmbsJQvDxHoxLJ70

// 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);
    }
  }
}

<!-- Adding the unique item id to the btn-group so we can find it later -->
<div class="btn-group" dropdown data-item-id="{{item.id}}">

Answer 2

作为替代方案，如果您只是更改数组的内容，而不是更改数组本身，下拉列表将保持打开状态：

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);
    })
}

table 刷新时保持行下拉

Sustain dropdown on row while table refreshes

javascript

angularjs

angular-ui-bootstrap