Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise

I have a user object and I have a complex logic, that I want to unit test, which takes a user object and decides how it should be displayed - which css class should be used.

There are two approach that I consider:

<td class="{{ user | classify }}">

or

<td class="{{ user.cssClass }}"><!-- or --><td ng-class="user.cssClass">

or

<td ng-class="computeCssClass(user)">

The first approach assumes I create a filter that based on the provided user objects returns the css class.

The second approach assumes I add a new attribute cssClass to the model and whenever a new user object is created (fetched from the REST API) I compute the cssClass attribute.

The third approach assumes I create a function which computes the css class for the provided user object.

What are the pros and cons of the above two approaches?

share|improve this question

This could use ng-class it self with an expression.

<td ng-class="{ active: user.active, suspended: user.suspended }">

Or if you are passing the cssClass directly from the API then that would be more easier

<td ng-class="user.cssClass">

Edit

1st Approach


Pros: Will give you desired output :)

Cons

  1. In your 1st approach by creating filter you are going to return css class name from it. Theoretically it will work, but if you think technically filter is mostly used on the collection object to filter out data based on filter criteria.
  2. Also using attribute with the {{}} wouldn't make sense to evaluate a class value, as angular does provide ng-class which is dedicated to do it.

2nd Approach

It looks pretty good. but in this you need to refactor your code bit. By moving it to utilService & lets use that code for ng-class directive by calling method from controller.

HTML

<td ng-class="cssClassComputationCode()">

Service

app.service('utilService', function(){
    var self = this;
    //below method can be testable by injecting its dependency in testing module
    self.cssClassComputationCode = function(){
        var cssClass = '';
        //here the computation thing will happen 
        cssClass = 'active';
        //some more code
        return cssClass;
    };
});

Controller

app.controller('myCtrl', function($scope, utilService){
     //assigning service method reference to controller scope variable
     $scope.computeCssClass = utilService.cssClassComputationCode;

     //other code here

});
share|improve this answer
    
I do not want to use expressions with ng-class because: 1) they will be duplicated in many places in the code, I want the logic that decides how to display a user in once place, 2) the actual logic I have is more complex than just checking the active and suspended attributes. – Adam Siemion 20 hours ago
    
@AdamSiemion look at the updated answer.. – Pankaj Parkar 20 hours ago
    
thanks for the suggestion, I have added this as another possibility. It seems very similar to the filter solution. Can you compare this approach with the second approach? In terms of its impact on the two-way data binding e.g. – Adam Siemion 20 hours ago
    
@AdamSiemion still you need any explanation why you shouldn't go for 1st approach? – Pankaj Parkar 19 hours ago
    
yes, please, can you compare the performance implications of the filter or function vs computed attribute solution? – Adam Siemion 19 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.