how to apply css in angular.js


Tags: html,css,angularjs

Problem :

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?



Solution :

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="angular.js@1.0.8" 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


    CSS Howto..

    how to not inherit? or how to reset inherited width to the value before? (css)

    How to auto-adjust size of other input fields while typing into input field #1?

    show play icon on image hover

    How to hide and show div border line in my case?

    How to dynamically add a CSS class and implement its style in JavaScript

    DOM How to add two divs (with jQuery inside them) next to each other?

    How to create a 3 columns fluid fixed fluid layout?

    How to organize html and css to do this UI design with responsive design

    How can I control the width of a
    with display:table; with a

    element inside with display:table-cell

    How to create a circle with divided borders in CSS and Javascript?

    How to Scale Down a Large Image Using HTML and/or CSS

    How to chain multiple -webkit-transition animations in my css without keyframes

    How to align a link icon after the text via CSS?

    How do I display the first image from each div with .className?

    How to make an image display above the background of an :after element

    How to link some text next to copyright in CSS

    How to set custom fonts in JavaFX Scene Builder using CSS

    I applied CSS auto-resizing to image, now how do I push it to the background?

    How do you prevent a CSS animation from rerunning when the display property changes?

    How to create css classes which are “stronger” that elements?

    resize/expanding slideshow (inside a div) overtakes content that follows below

    CSS animate — how to fill div from center

    How to make a multi category filter with JQuery, HTML and CSS

    How can I set a height, or allow a div to extend to the height of absolutely position elements within?

    How to style “submit” inputs on mouseover, click?

    how to diplay two html elements seemlessly

    How bad is to store all background images in CSS?

    How can I change input type of Yii CJuiAutoComplete?

    How to put the table inside the box

    How to center nav using CSS/HTML? [closed]