masterFly masterFly - 1 month ago 10
AngularJS Question

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!

Answer

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>