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>

在我的控制器中

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

所以我在控制器中做的是单击一行，它将数字推入数组中，点击同一行，它会从数组中弹出该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添加到控制器：

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

Answer 2

使用＆＃39; ng-repeat＆＃39;进行更合适的设置。请参阅以下工作代码：

JSFiddle

HTML：

<div ng-controller="MyController">
    <table>
        <tr ng-repeat="item in items" ng-click="selectRow(item)" ng-class="{row_selected: isSelected(item)}">
            <td>
                 <a id="{{item}}">test {{item}}</a>
            </td>
        </tr>
    </table>
</div>

JS / AngularJS：

var myApp = angular.module('myApp', []);
myApp.controller('MyController', ['$scope', function ($scope) {
    $scope.items = [1,2,3,4,5];
    $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);
        }
    };
    $scope.isSelected = function (id) {
        if( $scope.selectedArray.indexOf(id) > -1){
            return true;
        }
        return false;
    };
}]);

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

2 个答案: