javascript - 排列表格后保持所选元素突出显示

Question

我在 AngularJS 中有一个表，其中有几列，每列都可以按升序和降序排序。我希望每当用户单击一行时就选择它。我通过获取表的选定索引来做到这一点。但是，一旦我重新选择其中一列，所选行就会保持突出显示状态。我想要做的是保持先前选择的项目突出显示......无论其新索引在排序后可能在哪里。这是一个代码片段:

我的表体:

<tbody>
    <tr
      ng-class="{'selected':$index == list.selectedRow}"
      ng-repeat="item in list.itemList | order:list.orderBy:list.orderAsc">
      <td ng-click="list.select(item);list.setClickedRow($index)">{{ item.number }}
      </td>
      <td ng-click="list.select(item);list.setClickedRow($index)">{{ item.name }}
      </td>
    </tr>
</tbody>

设置选中行的方法:

function setClickedRow(index) {
    vm.selectedRow = index;
}

Answer 1

基于Slonski answer ，我建议您在更改选择时循环遍历所有项目以设置 selected = false:

function setClickedRow(item) {
  for(var i = 0; i < $scope.list.itemList.length; i++) {
    if(item == $scope.list.itemList[i]) item.selected = true;
    else $scope.list.itemList[i].selected = false;
  }
  item.selected = true;
}

<小时/>

更新:没有循环的解决方案

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.setMaster = function(section) {
    $scope.selected = section;
  }

  $scope.isSelected = function(section) {
    return $scope.selected === section;
  }
}]);

.active {
    background-color: orange;
}

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

<div ng-app="myApp" ng-controller="MyCtrl">
    <table>
      <tr ng-repeat="i in ['One', 'Two', 'Three']" ng-class="{active : isSelected(i)}">
        <td ng-click="setMaster(i)">{{i}}</td>
      </tr>
    </table>
    <hr> {{selected}}
</div>