任何人都可以告诉我出什么问题了,如何通过改进以下代码来获得所需的键导航结果?
<div class="outer_div" ng-app="auto_suggest" ng-controller="auto_suggest_controller">
<p class="para"><strong>Product Name</strong> <small>Try to use brand name along with the product name / Scan the product barcode.</small></p>
<input ng-model="search_prod" autocomplete="search_prod_suggest" ng-change="highlight()" ng-focus="show_dropdown()" ng-blur="hide_dropdown()" ng-minlength="3" type="search" class="form-control" key-navigation />
<div class="drop_down_div" ng-hide="drop_list_ul">
<ul class="list-group ul_css">
<li class="list-group-item" id="{{$index}}" index="{{$index}}" ng-repeat="prod in Products|filter:search_prod">
<div>
<label>
<span>
<img src="" class="img"/>
<span class="inner_content_span">
<span class="inside_li_prod" >{{prod.name}}</span>
<span class="inside_li_cont"><small>{{prod.content}}</small></span>
</span>
</label>
</div>
</li>
</ul>
</div>
</div>
以下是角度代码-W3school为我的情况提供了一个解决方案,但它完全是用javascript编写的,但我想在angularjs中完成。任何帮助将不胜感激。
auto_suggest.directive('keyNavigation', function ($timeout) {
return {
restrict: 'A',
scope:false,
link: function (scope,element, attrs) {
var focus_index;
element.on("keydown keypress", function (event) {
if (event.which === 38) {
for(var i=0;i<scope.Products.length;i++){
focus_index = $(".list-group-item").find(function(a){
console.log(a);
return a == scope.Products.indexOf(scope.Products[i].isSelected==true);
});
}
if (focus_index){
console.log(focus_index);
var target = $("#"+focus_index).prev();
$(target).trigger('focus');
}
}
if (event.which === 40) {
for(var i=0;i<scope.Products.length;i++){
focus_index = $(".list-group-item").find(function(a){
console.log(a);
return a == scope.Products.indexOf(scope.Products[i].isSelected==true);
});
}
if (focus_index){
console.log(focus_index);
var target = $("#"+focus_index).next();
$(target).trigger('focus');
}
}
});
}
};
});