Question

我可能会重新定义按钮点击时所执行的操作，但这无关紧要。我不需要帮助设置ng-click事件。那部分很容易。我正在努力获得我想要的动画效果。该应用程序是离子的，所以我自然而然地正在努力开发一个AngularJS解决方案。所有这些例子都有点偏离。

我需要将信息拼凑起来并构建它：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Swipe left to delete implementation using AngularJs</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-touch.js"></script>
    <script type="text/javascript">
        var app = angular.module('ngSwipeLeftExample', ['ngTouch']);

        app.controller('SampleSwipe', ['$scope', '$window', function($scope, $window) {
            // $scope.swipeLeft=false;
            // $scope.swipeRight=false;
            $scope.delete = function() {
                alert('bbb');
                // $scope.swipeLeft=true;
                // $scope.swipeRight=true;
            }
            $scope.edit = function() {
                alert('aaa');
                // $scope.swipeLeft=true;
                // $scope.swipeRight=true;
            }
            $scope.clickedTable = function() {
                // alert('clicked table');
                // $scope.swipeLeft=false;
                // $scope.swipeRight=false;
            }
        }]);
    </script>
</head>
<body ng-app="ngSwipeLeftExample" ng-controller="SampleSwipe">
    <table ng-init="swipeLeft = false; swipeRight = false;" data-ng-swipe-right="swipeRight = true" data-ng-swipe-left="swipeLeft = true" data-ng-click="" border=1 width="100%">
        <tr>
            <td width="100px">
                <div ng-show="swipeRight" >
                    <button ng-click="edit()" style="height: 44px;width: 109px;border: 0;background-color: green; color: white;font-size: 18px;font-weight: bold;cursor:pointer;">Edit</button>
                </div>
            </td>
            <td>
                <div  ng-click="clickedTable()">
                    <table>
                        <tr>
                            <td>aaaa</td><td>bbbb</td><td>cccc</td>
                        </tr>
                        <tr>
                            <td>aaaa</td><td>bbbb</td><td>cccc</td>
                        </tr>
                    </table>
                </div>
            </td>
            <td width="100px">
                <div ng-show="swipeLeft" >
                    <button ng-click="delete()" style="height: 44px;width: 109px;border: 0;background-color: red; color: white;font-size: 18px;font-weight: bold;cursor:pointer;" align="right">Delete</button>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

但我真的不想隐藏我想要调整记录大小的按钮，以便中间栏中的html块（我会把它放在那里它并不重要我放在那里）的大小应该适合页面（宽度= 100％我猜）然后可以向左或向右滑动画布上的编辑和删除按钮，以便用户可以看到它们并单击它们。我认为这可以通过某种方式完成转换。但似乎没有任何效果。我真的不是一个CSS人，我只是把我的css拼凑起来得到几乎我想要的东西，然后交给我的UI人来解决它。但他也不知道如何做到这一点。

似乎大多数ios和Android应用程序都有这样的方式，当有一个列表并向左滑动删除但似乎没有人愿意分享如何正确执行此操作的智慧。

让我猜想soeone会回复你对我的问题感到困惑，不知道我在问什么，即使它完全清楚了？正确的吗？

如何在画布上滑动左侧删除滑动右侧编辑按钮？

0 个答案: