Angularjs在切换点击时更改css答案

【问题标题】：Angularjs Change css on toggle clickAngularjs在切换点击时更改css
【发布时间】：2016-09-30 07:55:11
【问题描述】：

我正在尝试在单击行并取消单击行时更改表 tr 的 css。作为 Angular 的新手，我正在寻找一些工作指针。

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

【问题讨论】：

标签： javascript jquery css angularjs html-table

【解决方案1】：

你可以像这样使用 ng-class：

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

【讨论】：

【解决方案2】：

像这样试试。

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>

【讨论】：