CODEWITHSUNDEEP
angularjs
Edgaras Karka
Edgaras Karka

Reputation: 7852

AngularJs ng-mouseover not working in option tags

I use angularJS and I want to call function when mouse change over in option list. I tried ng-mouseover="changeProjectColor(t)" but it not working for me.

<select  id="select-tamplete"   ng-model="tamplete">
  <option ng-repeat="t in tampletes" ng-mouseover="changeProjectColor(t)"  ng-value="t">{{t.name}}</option>
</select>

controller:

 app.controller('ControlBoxCtrl',function($scope, adminSer, $log){

      $scope.adminSer = adminSer;

      $scope.tampletes = [
                            {name:"gray",colorClass:"gray"},
                            {name:"green",colorClass:"green"},
                            {name:"yellow",colorClass:"yellow"},
                            {name:"blue",colorClass:"blue"},
                            {name:"purple",colorClass:"purple"},
                            {name:"red",colorClass:"red"},
                            {name:"amber-light",colorClass:"amber-light"},
                            {name:"teal",colorClass:"teal"}
                          ];

      $scope.changeProjectColor = function(){
          $log.debug("change color");
      }



  });

enter image description here

Upvotes: 0

Views: 816

Answers (1)

Manu
Manu

Reputation: 10934

You cannot attach ng-mouseover, ng-clicked, ng-mousemove events with options list. You can do so with the select element since events can only be attached to elements and not to options. Better use ng-change event with selectbox to accomplish your requirement.

<select id="select-tamplete" ng-model="tamplete" ng-options="t.name for t in tampletes" ng-change="changeProjectColor(tamplete)">

</select>

Upvotes: 1

Related Questions