CODEWITHSUNDEEP
javascripthtmlangularjs
masterFly
masterFly

Reputation: 1112

AngularJS Select box - ngClick not firing

I have a select box which contains the ng-model directive. I want to fire an event when the user clicks on the select box (which will trigger before selecting an option).

<select id="count" name="count" class="form-control" ng-click="vm.clickCountSelector();" ng-model="vm.count" 
 ng-options="c.name for c in vm.getEligibleCountList()" required validation-messages></select>

But vm.clickCountSelector() doesn't fire when it should. How can I achieve this? Is there any way to trigger this event?

Thanks!

Upvotes: 0

Views: 435

Answers (5)

Prasad C
Prasad C

Reputation: 1

on select tag you can do ng-change instead ng-click. but if you want to capture ng-click on it, keep your select tag inside p or div tag and use ng-click on those tags. you may not be able to differentiate click if you have multiple tags inside a p or div tag.

Upvotes: 0

Andrei Balan
Andrei Balan

Reputation: 320

Not sure what you are trying to achieve but I would suggest to bind to ng-change for a select element. The ng-click will fire after you select an option.

If you really want to get a event you can use ng-mousedown.

var ngApp = angular.module('ngAppl',[]);

function aControlla($scope){
    $scope.count = function(){
       alert("It works!");
    }
    
    $scope.values = [
        {Name: "Entry 1"},
        {Name: "Entry 2"},
        {Name: "Entry 3"},
        {Name: "Entry 4"}
    ];
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<div ng-app="ngAppl">
    <div ng-controller="aControlla">
        
        <select ng-mousedown="count(val)" ng-model="val">
          <option ng-repeat="val in values" value ={{val.Name}}>
            {{val.Name}}
          </option>
        </select>        
    </div>
</div>

Upvotes: 2

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

Try this:-

angular.module('app', []).controller('NgListController', function($scope) {
  $scope.items = [{
    name: 'Item1'
  }, {
    name: 'Item2'
  }];


  $scope.clickCountSelector = function() {

    alert('select clicked');
  }



});
<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <fieldset ng-controller="NgListController">
    <select id="count" name="count" class="form-control" ng-click="clickCountSelector();" ng-model="vm.count" ng-options="c.name for c in items" required validation-messages></select>
  </fieldset>
</body>

</html>

Upvotes: 0

Ludovic Mercier
Ludovic Mercier

Reputation: 51

did you tried to add a $event in the call of your function ?

vm.clickCountSelector($event)

Upvotes: 0

alxbxbx
alxbxbx

Reputation: 323

You should use ng-change instead of ng-click.

Upvotes: 0

Related Questions