CODEWITHSUNDEEP
classangularjsangularjs-ng-click
Nitsan Baleli
Nitsan Baleli

Reputation: 5458

ng-click isn't working properly

Im trying to add/remove a calss from 3 buttons, for some reason it sometimes takes more than one click to work

<a class="button small">
  <i class="icon-circle-arrow-up" ng-click="select('slide')" ng-class="{active: 'slide' ==     selected}"></i>
</a>
<a class="button small">
  <i class="icon-resize-horizontal" ng-click="select('wave')" ng-class="{active: 'wave' == selected}"></i>
</a>
<a class="button small">
  <i class="icon-repeat" ng-click="select('role')" ng-class="{active: 'role' == selected}"></i>
</a>

the javascript:

myApp.controller("TodoCtrl", function($scope, $http) {
  $scope.slide = "one";
  $scope.animate = "slide";
  $scope.selected = "slide";
  return $scope.select = function(item) {
   $scope.selected = item;
   return $scope.animate = item;
 };
});

plunkr:

http://plnkr.co/QuXPziBWUgmiHcmcqC4F

Upvotes: 2

Views: 1831

Answers (2)

antonjs
antonjs

Reputation: 14318

Try to wrap the icon with a span using on-tap event:

    <span on-tap="select('slide')">
        <i class="icon-circle-arrow-up" ng-class="{active: 'slide' == selected}"></i>
    </span>

Upvotes: 0

galchen
galchen

Reputation: 5290

change 

      <a class="button small">
        <i class="icon-circle-arrow-up" ng-click="select('slide')" ng-class="{active: 'slide' == selected}"></i>
      </a>

to 

      <a class="button small" ng-click="select('slide')">
        <i class="icon-circle-arrow-up"  ng-class="{active: 'slide' == selected}"></i>
      </a>

You have the ng-click on the actual icon and not on the entire button

Upvotes: 5

Related Questions