Q1. Suppose I want to alter the look of each "item" that a user marks for deletion before the main "delete" button is pressed. (This immediate visual feedback should eliminate the need for the proverbial "are you sure?" dialog box.) The user will check checkboxes to indicate which items should be deleted. If a checkbox is unchecked, that item should revert back to its normal look.
What's the best way to apply or remove the CSS styling?
Q2. Suppose I want to allow each user to personalize how my site is presented. E.g., select from a fixed set of font sizes, allow user-definable foreground and background colors, etc.
What's the best way to apply the CSS styling the user selects/inputs?
CSS Conditional Rules is a CSS module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.
To add a conditional class in Angular we can pass an object to ngClass where key is the class name and value is condition i.e., true or false as shown below. And in the above code, class name will be added only when the condition is true.
Angular provides a number of built-in directives for manipulating CSS styling conditionally/dynamically:
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.
ng-class accepts an "expression" that must evaluate to one of the following:
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.
ng-style accepts an "expression" that must evaluate to:
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">
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.
I have found problems when applying classes inside table elements when I had one class already applied to the whole table (for example, a color applied to the odd rows <myClass tbody tr:nth-child(even) td>
). It seems that when you inspect the element with Developer Tools, the element.style
has no style assigned. So instead of using ng-class
, I have tried using ng-style
, and in this case, the new CSS attribute does appear inside element.style
. This code works great for me:
<tr ng-repeat="element in collection"> [...amazing code...] <td ng-style="myvar === 0 && {'background-color': 'red'} || myvar === 1 && {'background-color': 'green'} || myvar === 2 && {'background-color': 'yellow'}">{{ myvar }}</td> [...more amazing code...] </tr>
Myvar is what I am evaluating, and in each case I apply a style to each <td>
depending on myvar value, that overwrites the current style applied by the CSS class for the whole table.
UPDATE
If you want to apply a class to the table for example, when visiting a page or in other cases, you can use this structure:
<li ng-class="{ active: isActive('/route_a') || isActive('/route_b')}">
Basically, what we need to activate a ng-class is the class to apply and a true or false statement. True applies the class and false doesn't. So here we have two checks of the route of the page and an OR between them, so if we are in /route_a
OR we are in route_b
, the active class will be applied.
This works just having a logic function on the right that returns true or false.
So in the first example, ng-style is conditioned by three statements. If all of them are false, no style is applied, but following our logic, at least one is going to be applied, so, the logic expression will check which variable comparison is true and because a non empty array is always true, that will left an array as return and with only one true, considering we are using OR for the whole response, the style remaining will be applied.
By the way, I forgot to give you the function isActive():
$rootScope.isActive = function(viewLocation) { return viewLocation === $location.path(); };
NEW UPDATE
Here you have something I find really useful. When you need to apply a class depending on the value of a variable, for example, an icon depending on the contents of the div
, you can use the following code (very useful in ng-repeat
):
<i class="fa" ng-class="{ 'fa-github' : type === 0, 'fa-linkedin' : type === 1, 'fa-skype' : type === 2, 'fa-google' : type === 3 }"></i>
Icons from Font Awesome
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With