CODEWITHSUNDEEP
javascriptcssangularjsbutton
Oscar LT
Oscar LT

Reputation: 797

Change button style with angularjs

I have 3 buttons and I want change its style when the button was clicked. I don't know if angular has its own function like ng-class, ng-click or similar, but I not get it to works.

<button class="btn1" ng-click="function1"></button>
<button class="btn2" ng-click="function2"></button>
<button class="btn3" ng-click="function3"></button>

is possible call to another css class from js(in the function)? Thanks.

Upvotes: 0

Views: 2264

Answers (3)

muenchdo
muenchdo

Reputation: 2181

Inside your function definition you could set some variable on the scope, which you could then use inside an ng-class directive.

Example

Somewhere in your controller:

$scope.function1 = function () {
  $scope.clickedButton1 = true;
}

In your template:

<button 
  class="btn1" 
  ng-class="{'button1Clicked': clickedButton1}" 
  ng-click="function1()">Button1</button>

Upvotes: 0

brute_force
brute_force

Reputation: 1171

You can add a class dynamically on ng-click.

<li ng-class="{'xyzclass':addClass}" ng-click="addClass = TRUE"><a href="#users" >Users</a></li>

Upvotes: 1

Simon H
Simon H

Reputation: 21005

Try this for starters

<button 
    class="btn_theme btn1" 
    ng-class="{'clicked':clicker}" 
    type="submit" ng-click="select1()">Hello</button>

with this in the controller 

  $scope.select1 = function() {
    $scope.clicker = !$scope.clicker
  }

See http://plnkr.co/edit/zKsYoD3coPlZRHQkRQO1?p=preview

Upvotes: 2

Related Questions