Angularjs Change css on toggle click

Question

I am trying to change css for table tr on click on row and unclick row. Being a newbee to angular, I am looking for some pointer to work on it.

My fiddle started as

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <table border=1 width=100%>
  <tr ng-click="changeBackgroundOnToggle();"><td>Test Row 1</td></tr>
  <tr ng-click="changeBackgroundOnToggle();"><td>Test Row 2</td></tr>
  <tr ng-click="changeBackgroundOnToggle();"><td>Test Row 2</td></tr>

  </table>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.changeBackgroundOnToggle= function(){
    $(this).addClass(trBg);
    }
}

Kais · Accepted Answer · 2016-06-01 05:50:15Z

2

You can use ng-class like this:

HTML:

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <table border=1 width=100%>
  <tr ng-class="myColor[0]" ng-click="changeColor(0)"><td>Test Row 1</td></tr>
  <tr ng-class="myColor[1]" ng-click="changeColor(1)"><td>Test Row 2</td></tr>
  <tr ng-class="myColor[2]" ng-click="changeColor(2)"><td>Test Row 2</td></tr>

  </table>
</div>

JS:

$scope.changeColor= function(type){
// write your condition and give class Name in $scope.myColor[type]
}

answered Jun 1, 2016 at 5:50

Kais

2,0083 gold badges24 silver badges35 bronze badges

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

Comments

Hadi · Accepted Answer · 2016-06-01 05:51:56Z

try like this.

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.items = [{"name":"ali"},{"name":"reza"},{"name":"amir"}]
    $scope.changeBackgroundOnToggle= function(item){
       $scope.index = $scope.items.indexOf(item);
    }
}

.trBg{
  background-color:gray;
  color:#fff;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  Hello, {{name}}!
  <table border=1 width=100%>
  <tr ng-repeat="item in items" ng-click="changeBackgroundOnToggle(item);" ng-class="{'trBg':index == $index}"><td>{{item.name}}</td></tr>
 
  </table>
</div>

Collectives™ on Stack Overflow

Angularjs Change css on toggle click

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related