Can't Change CSS Style in Angularjs

Can't change CSS style in AngularJS

According to the docs:

Note: all element references in Angular are always wrapped with jQuery or jqLite; they are never raw DOM references.

So the .style property is not available directly, since it is a property of the wrapped HTMLElement.

You can either use ivarni's approach to get hold of the HTMLElement (angular.element(...)[0].style...) or use jQuery's/jqLite's .css() method:

angular.element('#element').css('height', '100px');

How to change CSS when it's ng-disabled?

use ng-class

<input type="submit" value="@Translator.Translate("PAYOUT")" class="btn-block 
secondary-button save-changes padding-8" ng-disabled="PayoutEnabled==false" 
ng-click="PayOut()" ng-class="{'diabled-class': !PayoutEnabled}" />

this will add css class diabled-class to the input when PayoutEnabled is false (!PayoutEnabled is true).

How to change a CSS property dynamically in AngularJS

You can use ng-style to dynamically change a CSS class property using AngularJS.

Hope this ng-style example will help you to understand the concept at least.

More information for ngStyle

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

myApp.controller("myAppCtrl", ["$scope", function($scope) {

      $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];

      $scope.style = function(value) {

          return { "background-color": value };

      }

}]);

ul{

  list-style-type: none;

  color: #fff;

}

li{

  padding: 10px;

  text-align: center;

}

.original{

  background-color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">

<div ng-controller="myAppCtrl">

  <div class="container">

    <div class="row">

      <div class="span12">

        <ul>

          <li ng-repeat="color in colors">

            <h4 class="original" ng-style="style(color)"> {{ color }}</h4>

          </li>

        </ul>

      </div>

    </div>

  </div>

</div>

</body>

change CSS based on value Angularjs

You should use ng-class instead of ng-style and add condition in ng-class to apply css class in your label.

HTML:

<button ng-click="changeType()">Change</button>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='one'}" for="fixed2">Client Contengency Fee</label>
<label class="fee-type" ng-class="{'disabled-class':feeType ==='two'}" for="fixed1">Fixed Fee Per Property</label>

and controller

$scope.feeType = 'two';

$scope.changeType = function() {
   $scope.feeType = 'one';
};

How do I conditionally apply CSS styles in AngularJS?

Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically:

ng-class - use when the set of CSS styles is static/known ahead of time
ng-style - use when you can't define a CSS class because the style values may change dynamically. Think programmable control of the style values.
ng-show and ng-hide - use if you only need to show or hide something (modifies CSS)
ng-if - new in version 1.1.5, use instead of the more verbose ng-switch if you only need to check for a single condition (modifies DOM)
ng-switch - use instead of using several mutually exclusive ng-shows (modifies DOM)
ng-disabled and ng-readonly - use to restrict form element behavior
ng-animate - new in version 1.1.4, use to add CSS3 transitions/animations

The normal "Angular way" involves tying a model/scope property to a UI element that will accept user input/manipulation (i.e., use ng-model), and then associating that model property to one of the built-in directives mentioned above.

When the user changes the UI, Angular will automatically update the associated elements on the page.

Q1 sounds like a good case for ng-class -- the CSS styling can be captured in a class.

ng-class accepts an "expression" that must evaluate to one of the following:

a string of space-delimited class names
an array of class names
a map/object of class names to boolean values

Assuming your items are displayed using ng-repeat over some array model, and that when the checkbox for an item is checked you want to apply the pending-delete class:

<div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
   ... HTML to display the item ...
   <input type="checkbox" ng-model="item.checked">
</div>

Above, we used ng-class expression type #3 - a map/object of class names to boolean values.

Q2 sounds like a good case for ng-style -- the CSS styling is dynamic, so we can't define a class for this.

ng-style accepts an "expression" that must evaluate to:

an map/object of CSS style names to CSS values

For a contrived example, suppose the user can type in a color name into a texbox for the background color (a jQuery color picker would be much nicer):

<div class="main-body" ng-style="{color: myColor}">
   ...
   <input type="text" ng-model="myColor" placeholder="enter a color name">

Fiddle for both of the above.

The fiddle also contains an example of ng-show and ng-hide. If a checkbox is checked, in addition to the background-color turning pink, some text is shown. If 'red' is entered in the textbox, a div becomes hidden.

Updating a CSS style globally with variable in scope

Look at the documentation page for ngStyle. It has almost exactly what you want.

<input type="button" value="set" ng-click="myStyle={color:'red'}">
<input type="button" value="clear" ng-click="myStyle={}">
<br/>
<span ng-style="myStyle">Sample Text</span>
<pre>myStyle={{myStyle}}</pre>

AngularJS - ng-style does not update css background property

I ran into this as well. Instead of evaluating with {{ }}, use string + value concatenation.

This will work:

<span ng-style="{'background':'transparent url(' + item.img + ')'}"></span>)

Here's a working version of your fiddle

Can't Change CSS Style in Angularjs