Изменить класс в angularjs через контроллер

Пожалуйста, помогите мне изменить класс ввода [type = button] динамически с помощью угловых и контроллеров.

app.controller('anodekeypadcntrl',function($scope){
	
	
	$scope.clickTwentyFour = function(event){
	  In this function I need to highlight the button (adding the .active class to it)	
	};
	                            
});

<div class="keypadcontainer" ng-controller="anodekeypadcntrl as child">
  ------
  <input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton"
	ng-click="clickTwentyFour($event)" />
  -------------
</div>

Ответы

Ответ 1

Вы можете использовать ngClass. В вашей разметке просто сделайте что-то вроде:

<input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton"
ng-click="clickTwentyFour($event)" ng-class="myDynamicClass" />

Таким образом, вы можете установить myDynamicClass как одну строку, содержащую класс CSS или массив строк непосредственно из вашего контроллера.

// controller code
$scope.myDynamicClass = 'some-css-class';

Это будет добавлено в HTML. Если вы посмотрите на ngClass документы, вы увидите, что вы можете даже присоединить функции, которые возвращают класс, или писать классы непосредственно в HTML с прилагаемыми условиями.

Ответ 2

Если вы хотите добавить класс, тогда Попробуйте следующее:

var myEl = angular.element( document.querySelector( '#twentyFour' ) );
myEl.addClass('active');

вы можете заменить вещи в элементе querySelector на требуемый идентификатор.

Ответ 3

Вы можете использовать ng-class для динамического добавления класса в div или кнопку или что-то еще

Вот рабочий плункер с вашим кодом

http://embed.plnkr.co/rzS8GV975BHRk83xhsPx/preview

Надеюсь, что это поможет

Ответ 4

Вы можете сделать это, используя 'ngClass'. Также обратите внимание, что вы можете использовать выражение для определения класса любого элемента html.

Предположим, что существует элемент модели с именем $isButtonActive = false;

    <input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton" ng-click="clickTwentyFour($event)"
 data-ng-class="isButtonActive? 'Active': 'Passive' "/>

Изменив значение "isButtonActive" с контроллера, (isButtonActive значение "true", добавлен класс "Active" ) вы можете управлять классом css.