使用angularjs中的键盘空间按钮更改网格中特定列的值

时间:2014-09-08 06:13:47

标签: javascript angularjs

我在下面发布了示例代码。在那里,我想使用键盘按钮(空格按钮)更改出勤值列。我正在搜索谷歌中的“示例代码/任何线索”,直到现在我得到任何样本。所以请帮助我/建议我解决这个问题。

<!DOCTYPE html>

<head lang="en">



    <meta charset="utf-8">


    <title>Custom Plunker</title>



  <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />


    <link rel="stylesheet" type="text/css" href="style.css" />


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>


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


    <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>


    <script type="text/javascript" src="main.js"></script>



<script>
   var app = angular.module('myApp', ['ngGrid']);


    app.controller('MyCtrl', function($scope) {


    $scope.myData = [{name: "Moroni", attendance: "L", age: 50},

                 {name: "Tiancum", attendance: "A", age: 43},

                 {name: "Jacob", attendance: "P", age: 27},

                 {name: "Nephi", attendance: "E", age: 29},

                 {name: "Enos", attendance: "L", age: 34}];


    $scope.gridOptions = { 
    data: 'myData',
    columnDefs: [{field:'name', displayName:'Name'}, {field:'attendance',          displayName:'Attendance', cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><a ng-click="ChangeValue(row)">{{row.getProperty(col.field)}}</a></div>'},
 {field:'age', displayName:'Age'}],
    showFooter: true,
    enableCellSelection: true,
    multiSelect: false,


 };
$scope.ChangeValue = function(row) {

    if(row.entity.attendance === 'L') {
        row.entity.attendance = 'P';
    } else if(row.entity.attendance === 'P') {
        row.entity.attendance = 'A';
    } else if(row.entity.attendance === 'A') {
        row.entity.attendance = 'E';
    } else {
        row.entity.attendance = 'L';
    }


}

    });

   </script>

</head>



<body ng-controller="MyCtrl">


    <div ng-grid="gridOptions" class="gridStyle"></div>


</body>

当我在列出勤时选择任何单元格时,我应该能够使用键盘“空格”按钮更改该值。

感谢: Ramakrishna K.C

0 个答案:

没有答案