Apply ng-class to array of items in angularjs

Question

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 ?

xiaoboa · Accepted Answer · 2014-04-01 06:27:59Z

2

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

edited Apr 1, 2014 at 6:27

answered Apr 1, 2014 at 5:30

xiaoboa

1,95114 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Salman Raza Over a year ago

Just a change in isRowSelected function. $scope.isRowSelected = function(id) { if($scope.selectedArray.indexOf(id) > -1) { return true; }else { return false; } };

xiaoboa Over a year ago

just return $scope.selectedArray.indexOf(id) > -1 directly, if true return true looks duplicated

Kyo · Accepted Answer · 2014-04-01 06:06:25Z

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

Collectives™ on Stack Overflow

Apply ng-class to array of items in angularjs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related