我的导航栏有一个简单的列表,我使用ng-click和ng-blur更改列表中的选定选项。不幸的是,它需要双击才能更改,我无法解释原因。
[1]: http://i.stack.imgur.com/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>
最佳答案
我找到了自己的解决方案,在导航栏中的href中引用了其他div,这些div与列表中元素的类具有相同的ID。我注意到,如果我从div中删除ID,则ng-click可以正常工作。谢谢你的时间。
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);
}
};