Html 通过控制器更改angularjs中的类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30252943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change class in angularjs through controller
提问by Anusha Sajeendran
Please help me to change the class of input[type=button] dynamically using angularjs and controller.
请帮助我使用 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>回答by Dan Moldovan
You can use ngClassfor this. In your markup just do something like:
您可以为此使用ngClass。在您的标记中，只需执行以下操作：
<input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton"
ng-click="clickTwentyFour($event)" ng-class="myDynamicClass" />
This way you can set myDynamicClassto be either a single string containing a CSS class or an array of strings directly from your controller
通过这种方式，您可以myDynamicClass直接从控制器设置为包含 CSS 类的单个字符串或字符串数组
// controller code
$scope.myDynamicClass = 'some-css-class';
This will get appended to the HTML. If you look at the ngClassdocs you will see that you can even attach functions which return a class, or write the classes directly in the HTML with conditions attached.
这将附加到 HTML。如果您查看ngClass文档，您会发现您甚至可以附加返回类的函数，或者直接在 HTML 中编写附加条件的类。
回答by Deepak Mani
If you want to add class then Try this :
如果你想添加类然后试试这个：
var myEl = angular.element( document.querySelector( '#twentyFour' ) );
myEl.addClass('active');
you can replace the the things in the querySelector with your required id.
您可以使用所需的 ID 替换 querySelector 中的内容。
回答by Alhuck A
You can use ng-classto dynamically add class to your divor button or whatever
您可以使用ng-class动态将类添加到您的div或按钮或其他任何内容
Here is a working plunker with your code
这是您的代码的工作plunker
http://embed.plnkr.co/rzS8GV975BHRk83xhsPx/preview
http://embed.plnkr.co/rzS8GV975BHRk83xhsPx/preview
Hope this helps
希望这可以帮助
回答by akhil_jose
You can do that by using 'ngClass'. Also note that you can use a expression to decide the class of any html element.
你可以通过使用'ngClass'来做到这一点。另请注意，您可以使用表达式来决定任何 html 元素的类。
Suppose there is a model element named $isButtonActive=false;
假设有一个名为 $isButtonActive=false 的模型元素；
<input type="button" value="24" id="twentyFour" class="twentyfour anodeKeypadButton" ng-click="clickTwentyFour($event)"
data-ng-class="isButtonActive? 'Active': 'Passive' "/>
By changing the value of the 'isButtonActive' from controller, (isButtonActive value to 'true', the 'Active' class is added) you can control the css class.
通过更改控制器中“isButtonActive”的值（将isButtonActive 值更改为“true”，添加了“Active”类），您可以控制css 类。
