如何在控制器中更改 CSS

How to change CSS in Controller

本文关键字：CSS 控制器      更新时间：2023-09-26

我正在尝试为错误做一个解决方法。 我只需要在单击其他复选框时更改元素的 css。但它不起作用..当我单击其他地方的其他按钮时，它只是有效，但是当我单击复选框时，视图没有刷新？有什么想法吗？

视图：

<input
    type="checkbox"  
    value="application.callback" id="telefonBox"
    ng-click="application.callback = !application.callback; toggleClass(application.callback)"
/>

控制器：

$scope.toggleClass = function(newValue) {
    var element = angular.element(document.querySelector('#additional'));
    if (newValue) {
        element.toggleClass("tooltip-agent tooltip-agentChecked ");
    } else {
        element.toggleClass("tooltip-agentChecked tooltip-agent");
    }
    $scope.$apply();
}

我试过这个，但不起作用

$scope.$watch('$scope.application.callback', function (newValue, oldValue) {
    var element = angular.element(document.querySelector('#additional'));
    if (newValue) {
        element.toggleClass("tooltip-agent tooltip-agentChecked ");
    } else {
        element.toggleClass("tooltip-agentChecked tooltip-agent ");
    }
将

ng-modal添加到复选框中

<input type="checkbox" ng-model="application.callback">

并ng-class到您的#additional元素中

<div id="additional" ng-class="{true:'tooltip-agent tooltip-agentChecked', false:'tooltip-agentChecked tooltip-agent'}[application.callback]"></div>

演示

你不应该尽可能多地操纵角度的元素，你可以用这样的ng-class更容易做到这一点

<div id="test" ng-class='{ active: vm.isChecked }'>
  lorem
</div>

ng-class接受对象作为参数，在这种情况下它是{ active: vm.isChecked }这意味着如果vm.isChecked的计算结果为 true，则 active 类将应用于元素

  $scope.selection = function($event) {
  var checkbox = $event.target;
  var action = (checkbox.checked ? 'check' : 'uncheck');
    if(action == "check")
       angular.element(document.querySelector('#additional')).addClass("tooltip-agent tooltip-agentChecked");
    else
       angular.element(document.querySelector('#additional')).addClass("tooltip-agentChecked tooltip-agen");
};
  });

  <input type="checkbox" id="additional" ng-model="check" ng-click="selection($event)"  >
相关文章：