将ng-repeat的$ index传递给另一个输入元素以在我的自定义指令中使用

时间:2019-01-19 13:14:45

标签: angularjs angularjs-directive

任何人都可以告诉我出什么问题了,如何通过改进以下代码来获得所需的键导航结果?

    <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');
                    }                           
                }
            });                                                         
        }
    };
});

0 个答案:

没有答案