CODEWITHSUNDEEP
angularjshtml-tablefocuskeydown
jeremy
jeremy

Reputation: 433

How to make individual items in a table selectable in angularjs

I have a table using ng-repeat... I want to be able to allow the users to select an item in the table using the key 'enter' which is equal to the keydown event 13. When a user clicks enter, I want to be able to focus in on the specific table row and make the variable 'selected' to true. When the user clicks on enter the second time, I want the 'selected' field to be set to false.

Here is what I have so far, any ideas?

html:

<tbody ng-model="educators">
    <tr ng-keydown="keydownevt()" tabindex="0" class="inventor-row"
        ng-repeat="ed in educators">
        <td class="inventor-col">
          <div><strong>{{ed.lastName}}, {{ed.firstName}}</strong></div>
          <div>{{ed.address}}</div>
          <div>{{ed.country}}</div>
        </td>
    </tr>
</tbody>

JS:

$scope.keydownevt = function () {
  $scope.keydownkeycode = event.keyCode;
  var selected = false;
  if (event.keyCode === 13) {
    // add focus
    return !selected;
  }
};

Upvotes: 1

Views: 717

Answers (1)

Ramon Marques
Ramon Marques

Reputation: 3264

Well, you didn't show where you want to store that selected value and an ng-model in tbody tag is really awkward, let me try to help

<tr ng-keydown="keydownevt(ed)" tabindex="0" ng-class="{selected: ed.selected}" class="inventor-row" ng-repeat="ed in educators">
        <td class="inventor-col">
          <div><strong>{{ed.lastName}}, {{ed.firstName}}</strong></div>
          <div>{{ed.address}}</div>
          <div>{{ed.country}}</div>
        </td>
      </tr>

$scope.keydownevt = function (ed) {
          $scope.keydownkeycode = event.keyCode;
          var selected = ed.selected || false;
          if (event.keyCode === 13) {
            // add focus
            return !selected;
          }
      };

Then you create a css class called ".selected" that paint that row or something

Upvotes: 1

Related Questions