Siyah Siyah - 1 year ago 103
Javascript Question

How to hide div on swipe in Angular

I've searched for it, but couldn't find it. Maybe the solution is simple, but I need some help.

What do I want to do?

I want to close / hide a div when swiped right

What does the div do?

It is a pop-up that is being shown when I click some button. I want to close this pop-up (this div) when I swipe to the right.

What do I use?


In my app.js, I have this:

$scope.warn = function (message) {

And in the HTML file where the div is, I have this:

<div on-swipe-right="warn('Must use scope')">....</div>

It gives me an alert, so I know the swipe gesture works.

Now, I want to hide the div when I swipe to the right, but I don't know how to implement this with
. Or should I use CSS? Can someone help me with it please?

Answer Source

You are very close. Just keep track of a 'showing' flag, something like this:

<div on-swipe-right="close(message)"

Then in your controller:

$scope.close = function (message) {
    $scope.hide = true;

Seeing that you use terms as 'message', you probably use an ng-repeat. In that case, you can do something like this:

<div ng-repeat="message in messages">
    <div on-swipe-right="close(message)"

And your controller:

$scope.messages = [{
}, {
    text:"some other text"

$scope.close = function (message) {
    message.closed = true;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download