design of button using angular js

Question

I want to change color of the button using angular Js while clicking the button for first click it should change color and for second click it should go to default color and repeat it

<script>
function setColor(btn, color){
    var count=2;
    var property = document.getElementById(btn);
    if (count == 0){
        property.style.backgroundColor = "#FFFFFF"
        count=1;        
    }
    else{
        property.style.backgroundColor = "#A9A9A9"
        count=0;
    }

}
</script>

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<input type="button" id="button" value = "button"  onclick="setColor('button', '#101010')";/>

</body>
</html>

What's not working? Are you getting any errors?

Andrej
– Andrej

2016-08-20 08:47:54 +00:00
Commented Aug 20, 2016 at 8:47 — Andrej
– Andrej, Commented Aug 20, 2016 at 8:47

Pankaj Parkar · Accepted Answer · 2016-08-20 07:50:51Z

1

You should be using combination of ng-class & ng-click directive. As you could toggle isSelected based on button click & ng-class will take care of which class needs to be apply.

CSS

.no-color{
  background-color: #FFFFFF
}

.custom-color{
  background-color: #A9A9A9
}

HTML

<input type="button" ng-class="{ 'no-color': !isSelected, 'custom-color': isSelected }" 
  value = "button"  ng-click="isSelected = !isSelected"/>

Demo Here

edited Aug 20, 2016 at 7:50

answered Aug 20, 2016 at 7:38

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

1 Comment

Pankaj Parkar Over a year ago

Have you checked the plunkr!

Collectives™ on Stack Overflow

design of button using angular js

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related