Question

我正在尝试针对错误进行解决方法。我需要在单击其他复选框时更改元素的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 ");
    }

Answer 1

DEMO

你不应该尽可能多地操纵角度元素，你可以使用YY-MM-DD这样做更容易

MM/DD/YY

ng-class接受一个对象作为参数，在这种情况下它是<div id="test" ng-class='{ active: vm.isChecked }'> lorem </div>，这意味着如果ng-class的计算结果为true，则{ active: vm.isChecked }类将应用于该元素

Answer 2

将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>

Answer 3

  $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)"  >

如何在Controller中更改CSS

3 个答案: