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

Sidebar closes when deleting element of array

本文关键字：数组元素 删除      更新时间：2023-09-26

我正在使用移动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/
<

解决方案/strong>

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

从doc中，有一行

你可以输入ui-turn-off='uiSidebarLeft'或ui-turn-off='uiSidebarLeft'在侧边栏内，使其在单击其中的链接后关闭。

所以你可以用这个或者你可以用或者你可以像下面这样用

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

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

相关文章：