javascript - 将ng-class应用于angularjs中的项目数组

Question

我正在尝试突出显示多行选择功能，以便当用户单击某一行时它会突出显示该行，而当它再次选择该行时它会取消突出显示。但我面临的问题是如何将项目数组提供给 ng-class。

这是我的代码。

<tr ng-click="selectRow(1)" ng-class="{row_selected: ArrayOfItems}" class="ng-scope odd">
    <td class="">
          <a href="1/">test</a>
     </td>
</tr>

在我的 Controller 中

$scope.selectedArray = [];
$scope.selectRow = function(id) {
    if($scope.selectedArray.indexOf(id) == -1) {
        $scope.selectedArray.push(id);
    }else {
        $scope.selectedArray.splice($scope.selectedArray.indexOf(id),1);
    }
});

所以我在 Controller 中所做的是单击一行将 id 推送到数组中，然后单击同一行它从数组中弹出该 id。

有什么帮助吗？

Answer 1

首先检查该行是否被选中

<tr ng-click="selectRow(1)" ng-class="{row_selected: isRowSelected(1)}" class="ng-scope odd">
  <td class="">
    <a href="1/">test</a>
  </td>
</tr>

将 isRowSelected 添加到 Controller :

$scope.selectedArray = [];
$scope.isRowSelected = function(id) {
    $scope.selectedArray.indexOf(id) != -1
}
$scope.selectRow = function(id) {
    if($scope.selectedArray.indexOf(id) == -1) {
        $scope.selectedArray.push(id);
    }else {
        $scope.selectedArray.splice($scope.selectedArray.indexOf(id),1);
    }
});