CODEWITHSUNDEEP
javascriptcssangularjs
Milind
Milind

Reputation: 1955

angularjs class is not working

I am new leaner to the angularjs and I make simple page as below, where in I have style called "item" and I am trying to give it to div but it is not working but on the same time if I give inline style then it will work.

What can be the issue, Kindly somebody help me

<html lang="en" >
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Angular Material style sheet -->
  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="KACApp">
  <div id="layoutContainer" ng-controller="layoutController as ctrl" style="height:100%">
    <div layout="row" layout-xs="column">
      <div flex class="item">Item</div>
      <div flex="20">Item 2</div>
    </div>
  </div>

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
  <style>
    .item {
      background: "#073857";
    }
  </style>
  <!-- Your application bootstrap  -->
  <script type="text/javascript">    
    /**
     * You must include the dependency on 'ngMaterial' 
     */
    angular.module('KACApp', ['ngMaterial'])
      .controller('layoutController',layoutController)
      .run(function() {
        console.log('App is ready');
      });

      function layoutController($scope){

      }
  </script>
</body>
</html>

Upvotes: 1

Views: 87

Answers (2)

fyasir
fyasir

Reputation: 2970

Try this

.item {
  background: #073857;
}

See the Plunker

Upvotes: 0

Tom Shen
Tom Shen

Reputation: 1045

Simply remove " from your style and it'll work :

.item {
  background: "#073857";
}

change to ->

.item {
  background: #073857;
}

Upvotes: 5

Related Questions