CODEWITHSUNDEEP
javascriptangularjs
Salman Raza
Salman Raza

Reputation: 350

Apply ng-class to array of items in angularjs

I am trying to highlight multiple row select functionality, so that when a user click's on a row it highlight the row and when it again select that row it un-highlight that. But the problem I am facing is how to give array of items to ng-class.

Here is my code.

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

And in my 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);
    }
});

So what I am doing in controller is on clicking a row it push the id's in an array and on clicking the same row it pops out that id from array.

Any help ?

Upvotes: 1

Views: 3720

Answers (2)

xiaoboa
xiaoboa

Reputation: 1953

First check whether the row is selected or not

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

Add the isRowSelected to 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);
    }
});

Upvotes: 2

Kyo
Kyo

Reputation: 964

More proper setup would be with in use of 'ng-repeat'. See the working code at:

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

Upvotes: 0

Related Questions