Angularjs Изменить css при нажатии кнопки

Question

Angularjs Изменить css при нажатии кнопки

0

Я пытаюсь изменить css для таблицы tr при щелчке по строке и строке unclick. Будучи новорожденным, я ищу некоторый указатель, чтобы работать над ним.

Моя скрипка началась

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

Kurkula 01 июнь 2016, в 07:58

Источник

Теги:

javascript

jquery

angularjs

css

html-table

2 ответа

2

Вы можете использовать ng-класс следующим образом:

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

Kais 01 июнь 2016, в 03:38

Ещё вопросы

Hadi J · Accepted Answer · 2016-06-01T03-22-00.000Z

попробуйте вот так.

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="/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>