javascript - 一旦在javascript中选择了一行，如何取消选择其他行？

Question

我有一张包含用户信息的表格。我想选择一行（一个对象）并显示选择图标，一旦我选择了一行，我想取消选择另一行（上一个选择的行）但是，使用我的代码，如果没有再次选择行，则会累积选择行.

我创建的代码：

  this.selectRow = function (row) {

  if (this.isClickable()) {
  $scope.properties.selectedRow = row;
  }
  if (row.selected === undefined)
    row.selected = false;
    row.selected = !row.selected;  

 }; 

 this.isSelected = function(row) { 
 return angular.equals(row, $scope.properties.selectedRow) ;
 }; 

和 HTML 表是：

<tbody ng-if="ctrl.isArray(properties.content) && ctrl.isArray(properties.columnsKey)">
        <tr ng-repeat="row in properties.content" ng-click="ctrl.selectRow(row)" ng-class="{'info': ctrl.isSelected(row)}">
            <td>&nbsp;&nbsp;<span class="glyphicon glyphicon-ok" ng-show="row.selected"></span></td>
             <td ng-if="!properties.allowHTML" ng-repeat="column in properties.columnsKey track by $index">
                {{ $eval(column, row) | uiTranslate }}
            </td>
            <td ng-if="properties.allowHTML" ng-repeat="column in properties.columnsKey track by $index">
                <div ng-if="properties.allowHTML" ng-bind-html="$eval(column, row) | uiTranslate"></div>
            </td>
        </tr>
    </tbody>

它似乎工作正常，我可以选择和取消选择行并且图标显示正确隐藏。但是，我需要取消选择之前已经选择的行。

选定的行对象是：

{“userName”：“user1”，“userId”：“23”，
“selected”：true } {“userName”：“user1”，“userId”：“23”，
“selected”：false }

任何帮助将不胜感激谢谢。

标签： javascriptselectrow

Answer 1

在这里，我正在重置上一个选定的行。我将其属性设置为 false。

this.selectRow = function(row) {
  // if row is already selected, deselect it.
  if (row.selected) {
    row.selected = false;
  } else {
    // find the row which was previously selected.
    const isRowSelected = $scope.properties.content.filter((item) => item.selected === true);
    if (isRowSelected.length > 0) {
      // if row found successfully, mark that row as deselected
      $scope.properties.content.filter((item) => item.selected === true)[0].selected = false;
    }
    // mark new row as selected
    row.selected = true;
  }

  if (this.isClickable()) {
    $scope.properties.selectedRow = row;
  }
  if (row.selected === undefined) {
    row.selected = false;
  }
};

this.isSelected = function(row) {
  return angular.equals(row, $scope.properties.selectedRow);
};