0

我有一种情况，我需要在第一次和第二次点击 div 时执行不同的事件。在第一次单击时，div 将被展开，在第二次单击时，它将被重定向到它的详细信息页面。div 包含帖子的详细信息。

  <div ng-click="select(comment._id);"
     ng-dblclick="changeurl(user.username,data.type,comment._id)"
       enter ng-repeat="user in data.user">

直到现在我在第一次单击时扩展 div，然后在双击时我将它重定向到它的详细信息页面。

最好的方法是什么。

现在我的想法是在 ng-click 上创建一个计数器，然后执行事件。我们可以在 DOM 端执行它吗？

 <div ng-click="counter = counter + 1"  ng-repeat="user in data.user" ng-init="counter = 0" >

是否有任何其他指令可以让我有条件地执行select(comment._id) changeurl(user.username,data.type,comment._id)或如何有条件地调用这些函数？

更新：关于戴安娜的建议，这里是更新状态：

这里我没有来自 ng-repeat 的 div，这里我有两种根据数据显示的布局。

  <div ng-repeat="data in comments">
    <div ng-if="data.type=story">
     <div ng-click="clickEvent($index,comment._id, user.username,data.type);" enter ng-repeat="user in data.user">
  //displaying data here
    </div>
      </div> 
      <div ng-if="data.type=news">
       <div ng-click="clickEvent($index,comment._id, user.username,data.type);" enter ng-repeat="user in data.user"> 
       //displaying data here
       </div>
      </div>
   </div> 



$scope.secondClick = [];
//scope data  
myservice.data().then(function(response){
    $scope.comments = response.data; 
    for (i=0; i< $scope.comments.length;i++){
     $scope.secondClick[i] = false; 
     }
   });



$scope.clickEvent = function(index,id, userName, type){

if(!$scope.secondClick[index]){

    // Execute first-click logic (call select function with the id).
    $scope.secondClick[index] = true;
}
else{

    // Execute second-click logic (call changeurl function with the id, userName, and type).

 }

}

我尝试提供索引来运行和操作它们。由于嵌套的 ng-repeat 我得到索引'0'。.

4

4 回答 4

2

更新2：

我试图从问题中了解您的设置，并相应地提出了一个完整的工作演示。我希望这适用于您的情况！

http://plnkr.co/edit/ARsDpRH7orzZQLU1pin1

请让我知道这是怎么回事。

////////////////////////////////

你可以有一些初始设置为假的布尔变量，比如说$scope.secondClick- 当你第一次单击按钮时将其设置为真。下次单击它时，变量为真，因此您执行“第二次单击”逻辑。

就像是：

<div ng-click="clickEvent(comment._id, user.username,data.type);" enter ng-repeat="user in data.user">

在您的控制器中，定义：

$scope.secondClick = false;

$scope.clickEvent = function(id, userName, type){

    if(!$scope.secondClick){

        // Execute first-click logic (call select function with the id).
        $scope.secondClick = true;
    }
    else{

        // Execute second-click logic (call changeurl function with the id, userName, and type).

    }

}

更新：

鉴于您有多个 div，我们可以通过在范围内设置一个布尔值数组并传递索引以知道哪个是哪个来稍微调整解决方案：

<div ng-click="clickEvent($index, comment._id, user.username,data.type);" enter ng-repeat="user in data.user">

在控制器中：

$scope.secondClicks = [];

//Initialize all values to false, based on the number of divs.
for(var i = 0; i<NoOfDivs; i++){
  $scope.secondClicks[i] = false;
}

$scope.clickEvent = function(index, id, userName, type){

    if(!$scope.secondClicks[index]){

        // Execute first-click logic (call select function with the id).
        $scope.secondClicks[index] = true;
    }
    else{

        // Execute second-click logic (call changeurl function with the id, userName, and type).

    }

}

请让我们知道这是否有效。如果有人有更简洁的解决方案，我也想检查一下:)

于 2014-05-19T12:07:20.207 回答
1

我认为这可能是告诉 JavaScript 根据点击次数做不同事情的简单方法。此示例显示了两个不同事件的交换。基本上，我只是将计数限制在 0 到 1 之间，并使序列循环。Ofc，您可以制作两个以上。我认为这样做的好处是循环的，因此用户可以自由导航（首先他扩展某些东西，然后将其缩小，然后再次扩展它等等......）。也许通过遵循这个原则，您将解决您的代码。

<!DOCTYPE html>
<head>
<style>
#division {background-color: red;color: white;width: 10%;height: 20%;position: fixed;top: 10%;left: 10%;-webkit-transition: 1s;-moz-transition: 1s;-ms-transition: 1s;-o-transition: 1s;transition: 1s;}
#division:hover {background-color: blue;cursor: pointer;}
</style>
</head>

<body>
<script type="text/javascript">           
    var clicks = 0;	
      function onClick() {
          clicks += 1;
          if (clicks != 1) { 
          clicks = 0;
          };
          if (clicks == 1) {
              document.getElementById("division").style.left = 30+'%';
          }else {
              document.getElementById("division").style.left = '10%';
          };	
      };	        	
</script>  	
<div onClick="onClick()"><a id="division">Click me Twice!</a></div>
</body>
</html>

于 2014-10-19T13:56:43.713 回答
0

尝试这个：

在html div中：

ng-init="count=0" 

ng-click="select(count)(count=count+1);"

在 JS 中：

$scope.select = function(count) {

    if(count%2 == 0 ) {

        here write your SECOND click functionality.

    } else {

        here write your FIRST click functionality.

    }

}
于 2014-06-18T08:21:29.317 回答
0

我通过将帖子 ID 放入 cookie 中来做到这一点。在第一次单击时，该帖子的 ID 存储在 cookie 中，如果用户再次单击，则会在 cookie 存储中创建第二次单击操作。因此，我们对第一次和第二次点击执行操作。

$scope.clickEvent = function(id,name,type){   

var favoriteCookie = $cookieStore.get('divonclick');      
$cookieStore.put('divonclick',id);
if(favoriteCookie == id){

   //second click action
  }else{
    //first click action
}

}

于 2014-06-18T08:30:09.567 回答