如何更改CSS在控制器

余米尝试以错误做一个解决方法。我需要在单击其他复选框时更改元素的CSS。但它不工作..它只是当我点击另一个按钮在其他地方，但当我点击复选框视图不刷新也许工作？任何想法？如何更改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 "); 
    }

来源

2016-02-26 tolquito

添加更多的代码，尤指所述附加部件 –

添加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>

来源

2016-02-26 10:23:08

DEMO

你不应该操纵角元素尽可能多的，你可以用ng-class做很容易像这样

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

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

来源

2016-02-26 09:48:42

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

来源

2016-02-26 10:53:14

如何更改CSS在控制器

回答

相关问题