角度を使用して矢印を使用してデータをナビゲートできるテーブルを作成するにはどうすればよいですか？

私は、ユーザーが左右の矢印キーを押したときに値が変化するデータ値を持つテーブルを作成するためのAngular.JSベースのアプローチを模索しています。角度を使用して矢印を使用してデータをナビゲートできるテーブルを作成するにはどうすればよいですか？

アイデアは、ユーザーがページを表示するために左/右ページを表示するオンスクリーンカタログを提示することです。

私はAngularを初めて使用しており、正しく使い始めるために努力しています。

私が今行っていることは、私が望むもののjQueryベースのアプローチです。 Angularでこれを行う方法を私に指示する良いアイデア、例、チュートリアルがありますか？

以下の例を参照してください。

//assume that the data comes from external source and its structure cannot be changed 
 
//well it can, but point is that the format is {index => object, index => object, ... } 
 
data = { 
 
    "0": "zero", 
 
    "1": "one", 
 
    "2": "two", 
 
    "3": "three", 
 
    "4": "four", 
 
    "5": "five", 
 
} 
 

 

 
counter = 0; 
 

 
//arrow functionality 
 
$(document).keydown(function(e) { 
 
    switch (e.which) { 
 
    case 37: // left 
 
     counter--; 
 
     if (counter < 0) counter = 5; 
 
     $('#data').text(data[counter]); 
 

 
     break; 
 

 

 
    case 39: // right 
 
     counter++; 
 
     if (counter > 5) counter = 0; 
 
     $('#data').text(data[counter]); 
 
     break; 
 

 
    default: 
 
     return; 
 
    } 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<table border="1"> 
 
    <tr> 
 

 
    <td style="font-size:2em">My value is =></td> 
 
    <td id="data" style="font-size:4em"><strong>zero</strong> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 

 
    <td colspan="2">Use left/right arrows on your keyboard to change value above<br> 
 
    You may have to first click inside the example area.</td> 
 
    </tr> 
 

 
</table>

出典

2016-04-06 Dennis

DOMではなくビューモデルを更新する、あなたが示したものを基本的に含むカスタムディレクティブです。 – isherwood

一つのアプローチは、このようになります：

app.js：

var app = angular.module('myApp', []); 

app.controller('indexCtrl', indexCtrl); 
indexCtrl.$inject = ['$scope', '$window']; 
function indexCtrl($scope, $window) { 

    $scope.data = { 
    "0": "zero", 
    "1": "one", 
    "2": "two", 
    "3": "three", 
    "4": "four", 
    "5": "five", 
    }; 
    $scope.counter = 0; 

    angular.element($window).bind('keydown', function(e) { 
    if (e.which == 37) { 
     $scope.counter--; 
     if ($scope.counter < 0) $scope.counter = 5; 
    } else if (e.which == 39) { 
     $scope.counter++; 
     if ($scope.counter > 5) $scope.counter = 0; 
    } 
    $scope.$apply(); 
    }); 
}

のindex.html：

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script> 
    <script src="app.js"></script> 
    </head> 
    <body ng-controller="indexCtrl"> 
    <table border="1"> 
    <tr> 
    <td style="font-size:2em">My value is =></td> 
    <td style="font-size:4em"><strong>{{data[counter]}}</strong> 
    </td> 
    </tr> 
    <tr> 

    <td colspan="2">Use left/right arrows on your keyboard to change value above<br> 
    You may have to first click inside the example area.</td> 
    </tr> 

</table> 
    </body> 
</html>

出典

2016-04-06 20:06:25 zamarrowski

角度を使用して矢印を使用してデータをナビゲートできるテーブルを作成するにはどうすればよいですか？

答えて

関連する問題