Question

在AngularJS应用程序中，我有一个视图，该视图在div中显示不同的图像。我想添加导航来查看，以便使用键盘导航键导航到不同的图像。有人可以指导如何实现吗？

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>AngularJS App</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/bootstrap.css">    
    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript" src="app/myAppModel.js"></script>
    <script type="text/javascript" src="app/myAppHomeCtrl.js"></script>
    <script type="text/javascript" src="lib/xml2json.js"></script>
</head>
<body style="background: #800000">

    <div class="container" ng-controller="myCtrl">
        <input class="form-control" id="inputdefault" type="text" style="width:25%; height:40px; display:inline" ng-model="searchKey" placeholder="Type to search">
        <button type="button" class="btn btn-danger" style="height:40px; margin:20px; margin-left:5px; display:inline" ng-click="loadSearch()">Search</button>

        <div ng-show="true" ng-app="myApp" ng-cloak class="w3-card-2 w3-margin" style="text-align:center; color:yellow; display: grid; grid-template-columns: auto auto auto auto auto; grid-gap:20px; width:730px; border-radius: 8px;">
            <div ng-repeat="x in myData" class="grid-item"><img style="border-radius: 8px;" src="{{x.logo}}" width="150" height="150">{{x.number+'. '+x.name}}</div>
        </div>
    </div>

</body>
</html>

Answer 1

这会有所帮助：

var len = myData.length;
var imageIndex = 0;

$(document).keydown(function(e) {

    if(imageIndex <0) {
       imageIndex = 0;
    }
    else if(len <=  imageIndex){
       imageIndex = len;
    }

    switch(e.which) {
        case 37: // left
        case 40: // down
        var currentImage = myData[imageIndex-1];
        $("img").attr(src, currentImage.number+'. '+currentImage.name);
        break;

        case 39: // right
        var currentImage = myData[imageIndex+1];
        $("img").attr(src, currentImage.number+'. '+currentImage.name);
        break;

        default: return; // exit this handler for other keys
        imageIndex++;
    }

    e.preventDefault(); // prevent the default action (scroll / move caret)
});

添加关键导航以查看

1 个答案: