CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-ng-click
ggwzrd
ggwzrd

Reputation: 163

NG-CLICK need double click to be trigged

I have a simple list for my navbar and I use an ng-click and ng-blur to change the selected option in the list. Unfortunately it needs a double click to be changed and I cannot explain why.

[1]: https://i.sstatic.net/6XpP9.png

[]: https://jsfiddle.net/9adtb3rt/1/

JS:

angular.module("myApp", [])
.controller("navCtrl", function(){

});

HTML:

<body ng-app="myApp">
  <div class="navbar" ng-controller="navCtrl">
   <ul>
     <div ng-repeat="e in ['about', 'offers', 'requests']"  ng-init="selected = false" class="{{e}}">
       <a href="#{{e}}" ng-blur="selected=false" ng-click="selected = !selected">
       <li ng-class="{'selected': selected}">{{selected}}</li>
      </a>
    </div>
   </ul>
 </div>
</body>

Upvotes: 0

Views: 685

Answers (1)

ggwzrd
ggwzrd

Reputation: 163

I found the solution my self, there are other div, that I refer to in the href in the navbar, that have the same ID as the class of the element in the list. I noticed that if I remove the ID from the divs the ng-click works fine. Thanks for your time.

HTML:

<ul>
 <div ng-repeat="e in ['about', 'offers', 'requests']"  ng-init="selected = false">
   <a href="" ng-blur="selected=false" ng-click="selected = !selected; moveTo(e)">
    <li ng-class="{'selected': selected}">{{e | uppercase}}</li>
   </a>
 </div>
</ul>

JS:

$scope.moveTo = function(e){
 var target = $("."+e);
 if(e === "about"){
  $('html, body').animate({
        scrollTop: 0
  }, 1000);
 }else{
  $('html, body').animate({
        scrollTop: target.offset().top
  }, 1000);
 }
};

Upvotes: 1

Related Questions