如何使表格中的单个项目可在angularjs中选择

时间:2017-06-05 16:00:28

标签: angularjs html-table focus keydown

我有一个使用ng-repeat的表...我希望能够允许用户使用键'enter'选择表中的项目,该键等于keydown事件13.当用户单击enter时,我希望能够专注于特定的表行,并将变量“selected”设置为true。当用户点击第二次输入时,我希望将“selected”字段设置为false。

到目前为止,我有什么想法?

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

1 个答案:

答案 0 :(得分:0)

嗯,你没有显示你想要存储所选值的位置,tbody标签中的ng-model真的很尴尬,让我试着帮助

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

然后你创建一个名为&#34; .selected&#34;的css类。画那行或什么