Hiding a div using swipe gestures in Angular

Question

Hiding a div using swipe gestures in Angular

What am I trying to achieve?

I aim to hide a div when swiped right. This specific action will close the pop-up that appears after clicking a button.

What tools are at my disposal?

I am utilizing Ionic framework for this task.

Within my app.js, I have included the following function:

    $scope.warn = function (message) {
      alert(message);
    };

In the HTML file containing the div, you can find the code snippet below:

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

An alert is triggered upon swipe, indicating the gesture detection is functional.

Now, I need guidance on how to proceed with hiding the div upon right swipe. Should I utilize ng-show? Or maybe resort to tweaking the CSS instead?

javascript css angularjs ionic-framework

Answer 1

Answer №1

You're almost there! Make sure to set a 'showing' flag, like this:

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

Then in your controller:

$scope.close = function (notification) {
    $scope.hideNotification = true;
};

If you're using terms like 'notification', you might be utilizing an ng-repeat. In that case, try this approach:

<div ng-repeat="notification in notifications">
    <div on-swipe-right="close(notification)"
         ng-hide="notification.dismissed">....</div>
</div>

And in your controller:

$scope.notifications = [{
    message:"someMessage"
}, {
    message:"another message"
}];

$scope.close = function (notification) {
    notification.dismissed = true;
};

Answer 2

You're almost there! Make sure to set a 'showing' flag, like this:

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

Then in your controller:

$scope.close = function (notification) {
    $scope.hideNotification = true;
};

If you're using terms like 'notification', you might be utilizing an ng-repeat. In that case, try this approach:

<div ng-repeat="notification in notifications">
    <div on-swipe-right="close(notification)"
         ng-hide="notification.dismissed">....</div>
</div>

And in your controller:

$scope.notifications = [{
    message:"someMessage"
}, {
    message:"another message"
}];

$scope.close = function (notification) {
    notification.dismissed = true;
};

Hiding a div using swipe gestures in Angular

Answer №1

Similar questions

Guidelines for securing login access where the "IsApproved" field must be true before authorization

Best practices for uploading an array of objects (multiple image files) using Node.js

Unable to establish an external connection with the node

Unlocking the power of RXJS by de-nesting subscriptions

Prevent request timeouts in Express.js

Displaying and concealing table rows based on selected items

When trying to bind an object that is constantly changing, one-way binding may not effectively capture those dynamic modifications

Best practices for hosting multiple front-end applications using AngularJS along with a single back-end application with Laravel on a shared server

Enhance the functionality of NodeJS core applications

"Exploring the Intersection of Meteor, NPM Packages, and Fiber Callbacks

Choosing each item from a lineup, one by one

"Shopping just got easier with our new drag and drop feature! Simply drag items

Creating bidirectional data binding with isolated scopes in AngularJS - a comprehensive guide

Focused Filtering in DataGrid Pagination

Issue: Unable to redirect to 'login' page from 'app.home' state

Tips for dynamically displaying images in both horizontal and vertical orientations

Prevent webpage from resizing when window dimensions change

Error: The request was denied by the operating system. Issue encountered while attempting to build a new React application

WordPress Header Display Issue on Mobile and Tablet Devices: What You Need to Know

CSS PopUp positioning