javascript - 如何从 AngularJS Controller 逻辑内部更改 HTML 元素的 CSS 类

Question

我正在寻找一个示例来从 AngularJS Controller 的逻辑内部更改 HTML 元素的 CSS 类

在 Controller 中，是这样的:

function myFunc() {
  //do a calculation
  //result is 3
  //change the class of HTML element with id="3" to add class="hidden"

我不能用 ngClick 来做，因为 Controller 决定改变哪个元素，而不是用户。

就像我想重新创建那个 Simon game从 80 年代开始，我会让 Controller 选择一个随机数 1-4，然后点亮 HTML 元素，用户必须在一定时间内点击它。

choice = Math.floor(Math.random() * 4) + 1;
if ( choice == 2 ) {
  lightUpBlue();
  setTimeout(turnOffBlue();, 2000);
}

我将如何编写 lightUpBlue() 来更改 HTML 文档中按钮的颜色，并可能更改超链接或其他一些属性？

提前致谢。

Answer 1

在您的 html 代码中使用 ng-class。

元素的 HTML

ng-class="myFunction"

ng-class 的文档

Controller

scope.myFunction = function() {
}

controller 的文档
scopes 的文档