david.carm david.carm - 3 months ago 7
Javascript Question

Sidebar closes when deleting element of array

I'm using mobile angular ui to open and close a sidebar. In this sidebar a user can search for persons and add or remove these from an array.

I have this repeat that shows the array of persons when clicking on the

<a ...></>
it closes the sidebar:

<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>


The above html snippet is from a directive that is in the sidebar.
The
removeRecipient($index);
function looks like this:

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


The function works but closes the sidebar and I can't figure out why it does this. So each time a user removes a recipient it has to swipe the sidebar open again. How do I keep this sidebar open?

References:



SOLUTION

I solved my problem by adding
$event.stopPropagation();
in the
ng-click
right behind the
removeRecipient($index);
function.

Answer

From doc, there was one line.

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

so may be you can use that or you can use or you can do like below.

e.stopPropagation()

for that you need to pass $event in

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

so in code, you can write.

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

I didn't used same tool, but may be this is issue.

Comments