如何使用angularJS

时间：2018-01-12 07:05:07

标签： jquery html angularjs angularjs-directive angularjs-scope

实际上，我已使用<ul>＆amp;已实施了一个自定义下拉列表。我的应用程序中的<li>个元素。现在，我可以通过鼠标单击选择下拉值，但作为功能要求的一部分，用户也可以使用回车键选择下拉值。所以为此，我在ng-keypress元素上绑定了ng-mousedown指令和<li>，但在这里我可以使用鼠标点击选择下拉值，但不能输入回车键。请不要认为这个问题是重复的，因为我在经过一些现有的线程后问这个问题并没有得到完美的答案。在这里我也发布了我的整个代码库。请看一次。我非常感谢你。

此处选择的值仅显示在搜索输入字段的上方，如下所示

enter image description here

这是我的代码库 - 

var appOne = angular.module('appOne', ['ngRoute']);

appOne.directive('myEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if (event.which === 13) {
                console.log("******From myEnter directive******");
                event.preventDefault();
            }
        });
    };
});

appOne.controller('controllerOne', function ($scope, $filter) {

    $scope.seriesSelected = [];
    var i = 0;
    $scope.startsWith = function (actual, expected) {
        i++;
        var lowerStr = (actual + "").toLowerCase();
        var j = lowerStr.indexOf(expected.toLowerCase()) === 0;
        if (i === 5) {
            $scope.isShowDropDown();
            i = 0;
        }
        return j;
    }

    $scope.isShowDropDown = function () {
        var e1 = angular.element(document.querySelector('#versionsId'));
        var k = 0;
        var column1RelArray = $('#versionsId li').map(function () {
            k++;
            if (k === 3) {
                return false;
            }
            return $(this).hasClass('versionValClass');
        });

        if (column1RelArray.length === 0) {

            e1.removeClass('open');
        }
        if (column1RelArray.length > 0) {

            e1.addClass('open');
        }
    }

    $scope.showDropDown = function (event) {
        var e1 = angular.element(document.querySelector('#versionsId'));
        if (!e1.hasClass('open')) {
            e1.addClass('open');
        }
    }

    $scope.versionList1 = [
        {
            "id": "217233",
            "value": "16.1",
            "index": "0",
            "type": "Class"
        },
        {
            "id": "217220",
            "value": "12.2",
            "index": "1",
            "type": "Class"
        },
        {
            "id": "217229",
            "value": "13.7",
            "index": "2",
            "type": "Class"
        },
        {
            "id": "212675",
            "value": "8.123",
            "index": "3",
            "type": "Class"
        },
        {
            "id": "212689",
            "value": "16.123",
            "index": "4",
            "type": "Class"
        }
  ];
    $scope.versionList = $scope.versionList1.slice(0);

    $scope.selecteSeries = function (indx) {
        $scope.filterSeries.value = '';
        $scope.seriesSelected.push($scope.versionList[indx]);

    }


    $scope.selecteSeriesOnPressEnter = function (indx, event) {
        console.log("keycode is" + event.keyCode);
        if (event.keyCode === 13) {
            $scope.filterSeries.value = '';
            $scope.seriesSelected.push($scope.versionList[indx]);
        }
    }

    $('ul#versionsId').on("mouseenter", "li", function () {
        $(this).addClass('selected').siblings().removeClass('selected');
    });



    $('input#searchField').keydown(function (e) {
        var $listItems = $('ul#versionsId li');
        var key = e.keyCode,
            $selected = $listItems.filter('.selected'),
            $current;

        if (key != 40 && key != 38) return;

        $listItems.removeClass('selected');

        if (key == 40) // Down key
        {
            if (!$selected.length || $selected.is(':last-child')) {
                $current = $listItems.eq(0);
            } else {
                $current = $selected.next();
            }
        } else if (key == 38) // Up key
        {
            if (!$selected.length || $selected.is(':first-child')) {
                $current = $listItems.last();
            } else {
                $current = $selected.prev();
            }
        }

        $current.addClass('selected');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example - example-filter-filter-production</title>
    <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" role="application" type="text/javascript"></script>
    <script type="text/javascript" src="myApp.js"></script>
    <style>
        .versionsId {
            display: none;
            position: absolute;
            width: 28%;
            z-index: 99;
            border: 0 1px 1px 1px solid #ddd;
            border: 1px solid #ddd;
            min-height: 249px;
            max-height: 250px;
            overflow: auto;
            background: #fff;
            margin-top: 0px;
            margin-left: 52px;
        }
        
        #selectedVers {
            list-style-type: none;
        }
        
        input:focus {
            outline: none;
            outline: 0;
            border: 0;
            border-bottom: 2px solid;
        }
        
        .versionsId.open {
            display: block;
        }
        /*.versionsId li:hover {
            background: #aaa;
        }*/
        
        .selected {
            background: #aaa;
        }
    </style>
</head>

<body ng-app="appOne" ng-controller="controllerOne">
    <div>
        <ul id="selectedVers">
            <li ng-repeat='s in seriesSelected'> {{ s.value }} </li>
        </ul>
    </div>
    <label>Search: <input id="searchField" ng-model="filterSeries.value" ng-keypress='showDropDown($event);' style="border:solid 0 0 1px 0;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 2px;border-left-width: 0px;"></label>

    <div>
        <ul id="versionsId" class="versionsId" style="padding-left: 4px;">
            <li ng-repeat='v in versionList | filter : filterSeries : startsWith' ng-class="{'selected': $first}" tabindex="{{versionList.indexOf(v)}}" class="versionValClass" ng-if='seriesSelected.indexOf(v) < 0 ' ng-mousedown='selecteSeries(versionList.indexOf(v))' ng-keypress='selecteSeriesOnPressEnter(versionList.indexOf(v), $event);'> {{ v.value }} </li>
        </ul>
    </div>




</body>

</html>

1 个答案:

答案 0 :(得分：0)

我玩了很多角度以获得任何解决方法，但仍然没有运气但是暂时我用JQuery完成了一些事情。

这是代码段 -

＆＃13;
＆＃13; 
var appOne = angular.module('appOne', ['ngRoute']);

appOne.controller('controllerOne', function ($scope, $filter, $http) {

    $scope.seriesSelected = [];
    var i = 0;
    $scope.startsWith = function (actual, expected) {
        i++;
        var lowerStr = (actual + "").toLowerCase();
        var j = lowerStr.indexOf(expected.toLowerCase()) === 0;
        if (i === 5) {
            $scope.isShowDropDown();
            i = 0;
        }
        return j;
    }


    $scope.isShowDropDown = function () {
        var e1 = angular.element(document.querySelector('#versionsId'));
        var k = 0;
        var column1RelArray = $('#versionsId li').map(function () {
            k++;
            if (k === 3) {
                return false;
            }
            return $(this).hasClass('versionValClass');
        });

        if (column1RelArray.length === 0) {
            e1.removeClass('open');
        }
        if (column1RelArray.length > 0) {
            e1.addClass('open');
        }
    }

    $scope.showDropDown = function (event) {
        var e1 = angular.element(document.querySelector('#versionsId'));
        if (!e1.hasClass('open')) {
            e1.addClass('open');
        }
    }

    $scope.selecteSeries = function (indx) {
        $scope.filterSeries.value = '';
        $scope.seriesSelected.push($scope.versionList[indx]);

    }


    $('ul#versionsId').on("mouseenter", "li", function () {
        $(this).addClass('selected').siblings().removeClass('selected');
    });



    $keypresselm = undefined;
    $('input#searchField').keydown(function (e) {
        var $listItems = $('ul#versionsId li');
        var key = e.keyCode,
            $selected = $listItems.filter('.selected'),
            $current;

        if (key != 40 && key != 38 && key != 13) return;

        $listItems.removeClass('selected');

        if (key == 40) // Down key
        {
            if (!$selected.length || $selected.is(':last-child')) {
                $current = $listItems.eq(0);
            } else {
                $current = $selected.next();
            }
            //  $keypresselm = $current;
        } else if (key == 38) // Up key
        {
            if (!$selected.length || $selected.is(':first-child')) {
                $current = $listItems.last();
            } else {
                $current = $selected.prev();
            }
            //$keypresselm = $current;
        } else if (key == 13) {
            $current = $listItems.eq(0);
            var ind = $keypresselm.attr('key');
            var e1 = angular.element(document.querySelector('#versionsId'));
            e1.removeClass('open');
            $scope.seriesSelected.push($scope.versionList[ind]);
            $scope.filterSeries.value = '';
            $scope.$apply();

        }
        
        $keypresselm = $current;
        if ($current !== undefined) {
            $current.addClass('selected');
        }

    });

    
    $scope.versionList1 = [
        {
            "id": "217233",
            "value": "16.1",
            "index": "0",
            "type": "Class"
            },
        {
            "id": "217220",
            "value": "12.2",
            "index": "1",
            "type": "Class"
            },
        {
            "id": "217229",
            "value": "13.7",
            "index": "2",
            "type": "Class"
            },
        {
            "id": "212675",
            "value": "8.123",
            "index": "3",
            "type": "Class"
            },
        {
            "id": "212689",
            "value": "16.123",
            "index": "4",
            "type": "Class"
            }
      ];

    $scope.versionList = $scope.versionList1.slice(0);

});
＆＃13; 
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example - example-filter-filter-production</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="myApp.js"></script>
    <style>
        .versionsId {
            display: none;
            position: absolute;
            width: 28%;
            z-index: 99;
            border: 0 1px 1px 1px solid #ddd;
            border: 1px solid #ddd;
            min-height: 249px;
            max-height: 250px;
            overflow: auto;
            background: #fff;
            margin-top: 0px;
            margin-left: 52px;
        }
        
        #selectedVers {
            list-style-type: none;
        }
        
        input:focus {
            outline: none;
            outline: 0;
            border: 0;
            border-bottom: 2px solid;
        }
        
        .versionsId.open {
            display: block;
        }
        /*.versionsId li:hover {
            background: #aaa;
        }*/
        
        .selected {
            background: #aaa;
        }
    </style>
</head>

<body ng-app="appOne" ng-controller="controllerOne">
    <div>
        <ul id="selectedVers">
            <li ng-repeat='s in seriesSelected'> {{ s.value }} </li>
        </ul>
    </div>
    <label>Search: <input id="searchField" ng-model="filterSeries.value" ng-keypress='showDropDown();' style="border:solid 0 0 1px 0;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 2px;border-left-width: 0px;"></label>

    <div>
        <ul id="versionsId" class="versionsId" style="padding-left: 4px;">
            <li ng-repeat='v in versionList | filter : filterSeries : startsWith' ng-class="{'selected': $first}" class="versionValClass" ng-if='seriesSelected.indexOf(v) < 0 ' ng-mousedown='selecteSeries(versionList.indexOf(v))' key="{{versionList.indexOf(v)}}">{{ v.value }} </li>
        </ul>
    </div>

    <div>
        <!--<label>SearchOne: <input ng-onkeyup="keyup()"></label>-->
        <!--<label>SearchOne: <input ui-event="{keyup: 'myFn($event)'}" style="border:solid 0 0 1px 0;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 2px;border-left-width: 0px;"></label>-->
    </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题