Question

我有2个按钮，我只想在点击按钮时添加一个类。

       <button class="panel-btn" 
        ui-sref="basechat" 
        ng-click="setBaseChat()" id="base-chat-btn">Base Chat</button>
        <button class="panel-btn" 
        ui-sref="banner" 
        ng-click="setBannerChat()" 
        id="banner-chat-btn">Banner</button>

ng-click上的函数返回true值。

希望你们能帮助我，我仍然不能理解ng-class的工作原理

Answer 1

如果你想在点击按钮上添加一个类，你可以这样做：

<button ng-class="{someClass: someTruthyValue}" ng-click="someFunction()">

ng-class将查看someTruthyValue的值，如果为True，则显示someClass，否则显示$scope.someTruthyValue = False; $scope.someFunction = function() { $scope.someTruthyValue = True; }。

例如，你的JS看起来像：

ng-class

此处docs are fairly good

此外，正如您在其他答案中所看到的，使用<button ng-click="someReverseFunction()">的方法不止一种，但我喜欢我的解决方案，因为它允许您选择将其他按钮链接到反向班级改变：

$scope.someReverseFunction = function() {
    $scope.someTruthyValue = False;
}

当然，确实：

{{1}}

Answer 2

举个简单的例子，你可以：

$scope.bannerClass = "baseClass"; // baseClass defined in your CSS

$scope.setBannerChat = function() {
    $scope.bannerClass = "myClass"; // myClass defined in your CSS
    // or $scope.bannerClass = "baseClass myClass";
}

然后：

<div ng-class="bannerClass">Hello</div>
<button ng-click=setBannerChat()></button>

Answer 3

您可以在控制器中执行此操作：

 $scope.clickFucntion = function(){
     $scope.myClass = 'my-class';
 }

并在您看来：

 <button class="{{myClass}}" ng-click="clickFucntion()">

在ng-click功能上添加活动类

3 个答案: