Dynamic class in Angular.js

by

You can simply assign a function as an expression and return proper class from there.
Edit: there is also better solution for dynamic classes. Please see note below.

Snippet from view:

<div ng-class="appliedClass(myObj)">...</div>

and in the controller:

$scope.appliedClass = function(myObj) {
    if (myObj.someValue === "highPriority") {
        return "special-css-class";
    } else {
        return "default-class"; // Or even "", which won't add any additional classes to the element
    }
}

Better way of doing this

I’ve recently learned about another approach. You pass in an object which has properties corresponding to the classes you operate on, and the values are expressions or boolean variables. A simple example:

ng-class="{ active: user.id == activeId }"

In this case active class will be added to the element as long as user.id matches activeId from the $scope object!

More Related Contents:

  1. Interface pointers C++
  2. Compiling dynamic HTML strings from database
  3. ‘POCO’ definition
  4. CKEditor automatically strips classes from div
  5. Angularjs – ng-cloak/ng-show elements blink
  6. Create an instance of a class in ES6 with a dynamic name? [duplicate]
  7. Types and classes of variables
  8. Method to dynamically load java class files
  9. List of class’s properties in swift
  10. Template in Fortran?
  11. What is the difference between static func and class func in Swift?
  12. What exactly is a Class Factory?
  13. Assignment of objects in VB6
  14. Extending Android Application class
  15. Creating class instance properties from a dictionary?
  16. Counting instances of a class?
  17. Swift: Test class type in switch statement
  18. Class constructor type in typescript?
  19. Swift and using class extension
  20. Dynamic static method call in PHP?
  21. Get all instances of a class in PHP
  22. How to defer routes definition in Angular.js?
  23. Access variable in different class – Swift
  24. apply formatting filter dynamically in a ng-repeat
  25. Dynamically creating classes – Python
  26. Copy Groovy class properties
  27. Fortran polymorphism in pointers
  28. How do you refactor a God class?
  29. Can I use in Google Apps Scripts a defined Class in a library with ES6 (V8)?
  30. What’s the difference between a protocol extended from AnyObject and a class-only protocol?

Leave a Comment