how to trigger a double click on a single click using angularJs [duplicate]

Question

I know answer for same question exists for jquery but i want to do it using angularJs. I want to trigger a double click on a single click using angularJs. Is it possible in angularJs. I m not able to find anything like that. I just found how to handle double click but i want to trigger double click on single click. I m using bootstrap tabs they are not activating on single click(Picture). I also tried change class onlick.

HTML code:

<ul class="nav nav-tabs">
  <li class="active" id="menu01" name="item" ng-class="{active : activeMenu === menuItems[0]}" ng-click="setActive(menuItems[0])"><a data-toggle="tab" href="#home">{{menuItems[0]}}</a></li>
  <li id="menu02" ng-class="{active : activeMenu === menuItems[1]}" name="item" ng-click="setActive(menuItems[1])"><a data-toggle="tab" href="#menu1">{{menuItems[1]}}</a></li>
  <li id="menu03" ng-class="{active : activeMenu === menuItems[2]}" name="item" ng-click="setActive(menuItems[2])"><a data-toggle="tab" href="#menu2">{{menuItems[2]}}</a></li>
  <li id="menu04" ng-class="{active : activeMenu === menuItems[3]}" name="item" ng-click="setActive(menuItems[3])"><a data-toggle="tab" href="#menu3">{{menuItems[3]}}</a></li>
  <li id="menu05" ng-class="{active : activeMenu === menuItems[4]}" name="item" ng-click="setActive(menuItems[4])"><a data-toggle="tab" href="#menu4">{{menuItems[4]}}</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
      {{templates[0].url}}
      <!-- <span ng-include="templates[0].url"></span> -->
    </div>
  <div id="menu1" class="tab-pane fade">
    </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div id="menu3" class="tab-pane fade">
    <h3>Menu 3</h3>
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>
</div>
<!--End of card-->

Controller:

$scope.menuItems = ['Course Goals','Curriculum', 'Course Landing Page', 'Automatic Messages', 'Course Settings'];
$scope.setActive = function(menuItem) {
   $scope.activeMenu = menuItem;
   console.log($scope.activeMenu);
}
$scope.templates =
   [{ name: 'template1.html', url: 'courseTemplates/courseTemp1.html'},
    { name: 'template2.html', url: 'courseTemplates/courseTemp2.html'}];
console.log($scope.templates);
}]);

Please show some effort you have done related to your problem. Yes, It is possible. — Farooq Ahmed Khan
– Farooq Ahmed Khan, Commented May 2, 2018 at 5:37
@AtulSharma Kindly have a look at question again. It is not duplicate. I ask question if i cannot find solution from anywhere. — Awais Ahmad
– Awais Ahmad, Commented May 2, 2018 at 6:04
@AwaisAhmad you can use the same logic, by creating two plain js or angular functions. — Atul Sharma
– Atul Sharma, Commented May 2, 2018 at 6:05
What is your purpose ? You want to call two function on single click ? — Sudhir Ojha
– Sudhir Ojha, Commented May 2, 2018 at 7:12

Farooq Ahmed Khan · Accepted Answer · 2018-05-02 06:06:58Z

0

Here is a small demonstration of how double-click is handled in Angular JS. Now as per this example, If I wanted to click/trigger double click event. I'd just call the relative handler $scope.performDblClick . I hope it helps with your problem.

var app = angular.module('demo', []);
app.controller('homeController', function($scope){
  $scope.outputMessage = 'Hi! Welcome to Angular JS Demo App.';
  $scope.performDblClick = function(){ alert('Item double clicked');};
});

.container-fluid { margin-top: 3% !important; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid" ng-app="demo">
  <div class="row" ng-controller="homeController">
    <div class="col-lg-3 pull-left">
      <button class="btn btn-primary btn-xs" ng-dblclick="performDblClick($event)">Click Me!</button>
    </div>
    <div class="col-lg-9 pull-right">{{ outputMessage }}</div>
  </div>
</div>

answered May 2, 2018 at 6:06

Farooq Ahmed Khan

4,0943 gold badges29 silver badges36 bronze badges

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

3 Comments

Awais Ahmad Over a year ago

i do not want to handle double click. I want to trigger double click on single click.

Farooq Ahmed Khan Over a year ago

What is your problem statement. Please be clear. Triggering double click to achieve? Be clear , so we might help in right direction

Awais Ahmad Over a year ago

Suppose i click one time(single click) on button but it should be double click not single.

Collectives™ on Stack Overflow

how to trigger a double click on a single click using angularJs [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related