Передача $ index для ng-repeat в другой элемент ввода для использования в моей пользовательской директиве - PullRequest
Новая
       8

Передача $ index для ng-repeat в другой элемент ввода для использования в моей пользовательской директиве

0 голосов
/ 19 января 2019

Может кто-нибудь сказать мне, что не так, и как я могу получить желаемый результат навигации по клавишам, улучшив приведенный ниже код? 

    <div class="outer_div" ng-app="auto_suggest" ng-controller="auto_suggest_controller">
        <p class="para"><strong>Product Name</strong>&nbsp;&nbsp;&nbsp;<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');
                    }                           
                }
            });                                                         
        }
    };
});
...