如何在Angular中滑动div

时间:2016-11-08 12:42:05

标签: javascript css angularjs ionic-framework

我想做什么?

我想在向右滑动时关闭/隐藏div。

div做了什么?

当我点击某个按钮时,会显示一个弹出窗口。当我向右滑动时,我想关闭这个弹出窗口(这个div)。

我该使用什么?

离子。

在我的 app.js 中,我有这个:

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

在div所在的HTML文件中,我有这个:

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

它给了我一个警报,所以我知道滑动手势有效。

现在,当我向右滑动时,我想要隐藏div,但我不知道如何使用ng-show实现此功能。或者我应该使用 CSS

1 个答案:

答案 0 :(得分:2)

你非常接近。只需跟踪“显示”标志,如下所示:

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

然后在你的控制器中:

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

看到您使用术语作为“消息”,您可能使用ng-repeat。在这种情况下,你可以这样做:

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

你的控制器:

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

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