Class not appending when click using ng-class

Question

I have a scenario where when click i am changing the border color from black to red by append a class to a div using ng-class.

But when i click a button the modal is getting triggered but the class is not getting appended.

<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

Here the div is already in black border when click on button i am making the flag true which should add class addBorder to the div which appends red color border.

But it isn't happening.

Any help would be appreciated.

nashcheez · Accepted Answer · 2017-03-21 12:20:56Z

1

Currently, beforeClicked border properties are overriding the border of .addBorder.

Just interchange the order of your css styles for .addBorder to have more preference.

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

.addBorder {
  border: 1px solid red;
}

Updated fiddle: http://jsfiddle.net/nashcheez/mb6o4yd1/700/

answered Mar 21, 2017 at 12:20

nashcheez

5,1931 gold badge30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachila Ranawaka · Accepted Answer · 2017-03-21 11:24:34Z

0

just make the style !important

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

demo

answered Mar 21, 2017 at 11:24

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

Irfan Ali · Accepted Answer · 2017-03-21 11:26:40Z

0

Update your css like below

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

.addBorder{
  border:1px solid red;

}

add border class after before clicked class.

answered Mar 21, 2017 at 11:26

Irfan Ali

2,3581 gold badge24 silver badges23 bronze badges

Collectives™ on Stack Overflow

Class not appending when click using ng-class

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related