首页 文章

如何从AngularJS控制器逻辑中更改HTML元素的CSS类

提问于
浏览
0

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

在控制器中,这样的事情:

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

我无法使用ngClick来执行此操作,因为控制器决定要更改哪个元素,而不是用户 .

就像我想从80年代重新创建Simon game一样,我会让控制器选择一个随机数1-4,然后点亮HTML元素,用户必须在一定的时间内点击它 .

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

如何编写 lightUpBlue() 来更改HTML文档中按钮的颜色,并可能更改超链接或其他属性?

提前致谢 .

3 回答

  • 0

    在你的html代码中使用ng-class .

    元素的HTML

    ng-class="myFunction"
    

    ng-class的文档

    调节器

    scope.myFunction = function() {
    }
    

    controller的文档
    scopes的文档

  • 1

    ngShow看起来是隐藏元素的最佳解决方案 .

  • 1

    最佳做法是避免从控制器或服务内部操纵DOM元素 . 为此,您可以编写自定义指令 .

    那么你可以修改任何元素,如:

    angular.element(document.querySelector('[id="3"]')).addClass('hidden');
    

相关问题