Question

我有一张桌子，每隔几秒刷新一次。在每一行上，我都有一个下拉列表（来自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>

我做了一个演示here的傻瓜，可能比在胡言乱语更容易！如果您点击下拉列表并等待几秒钟，您将看到它消失。

非常感谢任何建议。

修改：感谢 Denocle 的回答，这里...... plunkr

...而且我在DOM中没有使用ID就稍微改进了他的方法，这里...... plunkr

感谢您的帮助和评论。

Answer 1

只要您拥有所有行的唯一ID，就可以在刷新之前保存打开下拉列的行的ID，然后在数据更新到添加后找到该行＆＃34;开＆＃34;在该行上的btn-group类。

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

＆＃13;

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

＆＃13;

<!-- 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}}">

＆＃13;

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

表格刷新时保持行下拉

2 个答案: