删除数组元素时侧边栏关闭

Question

我正在使用移动设备 angular ui 打开和关闭边栏。在此边栏中，用户可以搜索人员并从数组中添加或删除这些人。

我有这个重复，当点击 <a ...></> 它关闭侧边栏时显示人员数组：

<li ng-repeat="recipient in persons.recipients">
    <span class="wrapper">
        <span class="imageWrap">
            <span class="initials">
                {{recipient.firstName.charAt(0)}}{{recipient.lastName.charAt(0)}} </span>
        </span>
        <a href="" class="trash" ng-click="removeRecipient($index);"><i class="fa fa-trash-o" aria-hidden="true"></i></a>
        <span class="details">
            <span class="info">
                {{recipient.firstName}} {{recipient.lastName}}
                <span class="persnr">{{recipient.employeeID}}</span>
            </span>
        </span>
    </span>
</li>

上面的 html 片段来自边栏中的指令。 removeRecipient($index); 函数如下所示：

$scope.removeRecipient = function(index) {
    $scope.persons.recipients.splice(index,1);
}

该功能有效但关闭了侧边栏，我不明白为什么会这样。因此，每次用户删除收件人时，都必须再次滑动侧边栏打开。如何让这个边栏保持打开状态？

参考文献：

手机angularui：http://mobileangularui.com/docs/sidebars/

解决方案

我通过在 removeRecipient($index); 函数后面的 ng-click 中添加 $event.stopPropagation(); 解决了我的问题。

Answer 1

来自文档，只有一行。

You can put ui-turn-off='uiSidebarLeft' or ui-turn-off='uiSidebarLeft' inside the sidebar to make it close after clicking links inside them.

所以你可以使用它或者你可以使用或者你可以像下面那样做。

e.stopPropagation()

为此你需要在

中传递 $event

<a href="" class="trash" ng-click="removeRecipient($index,$event);"><i class="fa fa-trash-o" aria-hidden="true"></i></a>

所以在代码中，你可以这样写。

$scope.removeRecipient = function(index,e) {
    if(e){
        e.stopPropagation()
    }
    $scope.persons.recipients.splice(index,1);
}

我没有使用相同的工具，但这可能是个问题。

删除数组元素时侧边栏关闭

Sidebar closes when deleting element of array

javascript

angularjs

mobile-angular-ui