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

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

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

Hot Network Questions