Execute different Event on First and second click angular js

Question

I have a situation where i need to execute different event on first and second click on div. On first click div will be expanded and in second click it will be redirected to it's detail page. Div contains details of post.

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

Till now i was expanding div on first click and then on double click i was redirecting it to it's detail page.

what would be the best way to do it.

right now my idea is to make a counter on ng-click and then execute event. can we execute it on the DOM End.

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

is there any other directive where i can execute select(comment._id) changeurl(user.username,data.type,comment._id) conditionally or how can i call these functions conditionally ?

Update: on Diana advice here is updated status:

Here i have no of div's coming from ng-repeat, here i have two type of layouts which are displayed according to data.

  <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).

 }

}

I tried providing index to function and manipulate them. Because of nested ng-repeat i am getting index '0'. .

Diana Nassar · Accepted Answer · 2014-05-20 10:59:31Z

2

UPDATE2:

I tried to understand your setup from the question and came up with a full working demo accordingly. I hope this works for your case!

http://plnkr.co/edit/ARsDpRH7orzZQLU1pin1

Please let me know how this goes.

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

You could have some boolean variable that is initially set to false, say $scope.secondClick - when you click the button the first time set it to true. When clicking it the next time the variable is true so you execute the "second click" logic.

Something like:

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

In your controller, define:

$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).

    }

}

UPDATE:

Given that you have more than one div, we can tweak the solution a bit by having an array of boolean values in the scope and passing the index to know which is which:

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

In the controller:

$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).

    }

}

Let us know if this works please. If someone has a neater solution, I'd like to check it out as well :)

edited May 20, 2014 at 10:59

answered May 19, 2014 at 12:07

Diana Nassar

2,30316 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anil Sharma Over a year ago

I have no of div coming from ng-repeat . check updated question?

Anil Sharma Over a year ago

i have some issues where i am getting 0 index for all div's . check my update.

Anil Sharma Over a year ago

You demonstrated things nicely but i don't why parent index and current index for all div's are coming zero.

Diana Nassar Over a year ago

In my demo? Or your code? If it is in your code please post a Plunker so I can check.

Andrej Ilic · Accepted Answer · 2014-11-27 17:45:59Z

I think this may be a simple way to tell JavaScript to do different things depending on the number of clicks. This example shows swapping of two different events. Basicly, I just limited the counting from 0 to 1 and made sequence circular. Ofc, you can make more than just two. I think the advantige of this is that is circular, so the user may navigate freely (first he expands something, than he shrinks it back, than he expands it again etc...). Maybe by following this principle you will solve your code.

<!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>

Anil Sharma · Accepted Answer · 2014-06-18 08:40:52Z

0

I did this by putting post id in cookie. On first click that post's id is stored in cookie and if user click again it is founded in cookie store second click action is triggered. Hence we do action on first and second click.

$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
}

}

edited Jun 18, 2014 at 8:40

answered Jun 18, 2014 at 8:30

Anil Sharma

2,9625 gold badges32 silver badges45 bronze badges

Comments

Crackertastic · Accepted Answer · 2014-10-19 14:31:01Z

0

Try This:

In html div:

ng-init="count=0" 

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

In JS:

$scope.select = function(count) {

    if(count%2 == 0 ) {

        here write your SECOND click functionality.

    } else {

        here write your FIRST click functionality.

    }

}

edited Oct 19, 2014 at 14:31

Crackertastic

4,9232 gold badges33 silver badges40 bronze badges

answered Jun 18, 2014 at 8:21

Alagarasan M

9078 silver badges16 bronze badges

Collectives™ on Stack Overflow

Execute different Event on First and second click angular js

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related