Question

请帮我用angularjs和controller动态更改输入类[type = button]。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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中直接编写类。

Answer 2

如果你想添加课程试试这个：

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

您可以使用所需的ID替换querySelector中的内容。

Answer 3

您可以使用ng-class动态地将类添加到div或按钮或其他

这是一个带有代码的工作插件

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

希望这有帮助

Answer 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类。

通过控制器

4 个答案: