how to apply css in angular.js

Question

i have html like this

 <div ng-controller="newcontroller">
     <div class="firstdiv"  ng-show="show">welcome</div>
      <button ng-click="newfunction">click</button>
 </div>

js file like this

  app.controller('newcontroller',function($scope)
  {
         $scope.show=false
         $scope.newfunction=function()
         {
                $scope.show=true;

         }

  });

i have css like this css

.firstdiv { background:green; }

.newclass{background:black;}

Here i am doing that when i click on click button i am showing welcome message. i want to make changes in css dynamically for that div. so i have another css class name called newclass .so when i click on click button i have to apply that new class for making changes in css ....how to do that?

charlietfl · Accepted Answer · 2013-10-31 13:20:56Z

1

Use ng-class with expressions to check scope variables

Here's example that doesn't require any function in scope to acheive what you want.

<div ng-class="{newclass : toggle,firstdiv: !toggle} ">welcome</div>
<button ng-click="toggle=!toggle">click</button>

In scope:

$scope.toggle=false;

Using this approach you don't need to write methods to change your elements, they can be changed by simply checking state of a variable within scope

DEMO

answered Oct 31, 2013 at 13:20

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

lukpaw · Accepted Answer · 2013-10-31 11:29:57Z

Try this:

index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-app="myApp">
    <div ng-controller="newcontroller">
      <div ng-class="[myclass]">welcome</div>
      <button ng-click="newfunction()">click</button>
    </div>

    <script data-require="[email protected]" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>    
    <script src="script.js"></script>    
  </body>

</html>

script.js

'use strict';

var app = angular.module('myApp', []);

app.controller('newcontroller', ['$scope',
  function($scope) {

    $scope.myclass = 'firstdiv';

    $scope.newfunction = function() {
      $scope.myclass = 'newclass';
    };

  }
]);

style.css

.firstdiv { background: green; }
.newclass { background: yellow; }

Working example: http://plnkr.co/edit/oCZGOM?p=preview

rarely need a function just for class change...rather ng-class allows expression to check a scope variable

Boris Ivanov · Accepted Answer · 2013-10-31 11:20:51Z

0

I think you should describe all states of your button in CSS. Then no need to change anything realtime.

Have a look here

answered Oct 31, 2013 at 11:20

Boris Ivanov

4,2541 gold badge35 silver badges42 bronze badges

Collectives™ on Stack Overflow

how to apply css in angular.js

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related