Siyah Siyah - 1 month ago 11
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?

Ionic

In my app.js, I have this:

$scope.warn = function (message) {
alert(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
ng-show
. Or should I use CSS? Can someone help me with it please?

Answer

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

<div on-swipe-right="close(message)"
     ng-hide="hide">....</div>

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)"
         ng-hide="message.closed">....</div>
</div>

And your controller:

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

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