Login/Register
Click event on glypicon
Asked Answered
Solved angularjstwitter-bootstrap-3angularjs-ng-click
M

1

6

How do I add a ng-click event to a bootstrap glyphicon in a textbox? The event doesn't get fired...

<body ng-app ng-init="mymodel='THIS IS MY MODEL'">
    <h3>How to clear the model on remove icon click?</h3>
    <div class="container">
    <div class="form-group has-feedback" >
      <input type="text" class="form-control" ng-model="mymodel"/>
       <i class="glyphicon glyphicon-remove form-control-feedback" 
       ng-show="mymodel" ng-click="mymodel = null"></i>
     </div>
    <p>This is my model: {{mymodel}}</p>

    <strong ng-click="mymodel = null">This works tho...</strong>
    </div>
</body>

Plnkr link

Mansion answered 14/3, 2015 at 9:50 Comment(0)
M
5

This is happening because glyphicons provided with " pointer-events: none;" as default you can override it and remove this functionality by simple CSS:-)

 .my .glyphicon {
      pointer-events: all;
    }

<div class="form-group has-feedback my" >
      <input type="text" class="form-control" ng-model="mymodel"/>
       <i class="glyphicon glyphicon-remove form-control-feedback" 
       ng-show="mymodel" ng-click="mymodel = null"></i>
     </div>

Plunker

May answered 14/3, 2015 at 10:17 Comment(1)
@Manube this is applying to glyphicon because of .form-control class and the idea is to show the input and glyphicon as a single entity. – May

© 2022 - 2024 — McMap. All rights reserved.