Question

我有一个场景，当点击我将边框颜色从黑色更改为红色时，通过使用ng-class将类附加到div。

但是当我点击一个按钮时，模态会被触发，但是没有附加类。

<div ng-class="{'addBorder':clicked}" class="beforeClicked">
<button ng-click="clickToOpen()">My Modal</button>
</div>

function MyCtrl($scope, ngDialog) {
$scope.clicked=false;
$scope.clickToOpen = function () {
        $scope.clicked=true;
    ngDialog.open({ template: 'templateId' });
};

}

.addBorder{
  border:1px solid red;

}
.beforeClicked{
 width:100px;
  height:300px;
  border:1px solid black
}

DEMO

这里div在点击按钮时已经处于黑色边框我正在使标志为true，这应该将类addBorder添加到附加红色边框的div。

但它没有发生。

任何帮助都将不胜感激。

Answer 1

目前，beforeClicked边框属性会覆盖.addBorder的边框。

只需更改.addBorder的css样式的顺序即可获得更多偏好。

.beforeClicked {
  width: 100px;
  height: 300px;
  border: 1px solid black
}

.addBorder {
  border: 1px solid red;
}

更新了小提琴：http://jsfiddle.net/nashcheez/mb6o4yd1/700/

Answer 2

只需制作样式!important

.addBorder{
  border:1px solid red !important;      
}

demo

Answer 3

更新您的css，如下所示

.beforeClicked{
 width:100px;
  height:300px;
  border:1px solid black
}

.addBorder{
  border:1px solid red;

}

在点击课程之前添加边框课程。

使用ng-class单击时不添加的类

3 个答案: