如何在angularjs中选择表中的单个项目 [英] How to make individual items in a table selectable in angularjs

问题描述

我有一个使用ng-repeat的表...我希望能够允许用户使用与击键事件13相等的键"enter"在表中选择一个项目. ，我希望能够专注于特定的表行并将变量选定"设置为true.当用户第二次单击Enter时，我希望将"selected"字段设置为false.

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;
  }
};

推荐答案

好吧，您没有显示要在其中存储所选值的位置，因此tbody标签中的ng-model确实很尴尬，请允许我尝试帮助

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;
          }
      };

然后您创建一个名为".selected"的CSS类，以绘制该行或其他内容

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

这篇关于如何在angularjs中选择表中的单个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！