通过控制器更改angularjs中的类答案

【问题标题】：Change class in angularjs through controller通过控制器更改angularjs中的类
【发布时间】：2015-07-26 23:46:57
【问题描述】：

请帮助我使用 angularjs 和控制器动态更改 input[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>

【问题讨论】：

标签： html css angularjs twitter-bootstrap

【解决方案1】：

您可以使用“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类。

【讨论】：

【解决方案2】：

如果你想添加类然后试试这个：

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

你可以用你需要的id替换querySelector中的东西。

【讨论】：

虽然这是一个非常好的方法，但我们不想在这里重新发明轮子。 Angular 已经提供了用于设置动态类和样式的内置功能，因此我们不应该使用选择器等使代码复杂化。
这是真的，但没有明确的解释或案例按钮应该如何具有一个活动类，所以问题将有这个简单的答案。如果它是更具体的类的动态绑定将是一个更好的选择

【解决方案3】：

您可以使用ng-class 将类动态添加到您的div或按钮或其他任何东西

这是你的代码的工作 plunker

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

希望对你有帮助

【讨论】：

【解决方案4】：

您可以为此使用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 中编写附加条件的类。

【讨论】：