Change CSS (or class) of an angular directive element based on data from ng-repeat

Question

I have data coming from an ng-repeat in my main html

<span ng-repeat="acqui in acquis">
    <card-info class="card" acqui="acqui"></card-info>
</span>

in my card-info directive (separate html file) I have a few elements that display the data

<h6 class="buyer">Acquired By: <strong>{{acqui.buyer.name}}</strong></h6>
<h2 class="seller">{{acqui.seller.name}}</h2>
<h1 id="value" class="value">{{acqui.value | shortNumber}}</h1>

I want to change the color of value if the value is undisclosed. I would prefer to just be able to change the class from "value" to "undis", but I would be okay with just overwriting the CSS and changing the color that way.

I have already tried a few ways, none of which have yet to be successful.

I tried detecting it in my directive:

acquisitionApp.directive('cardInfo', function() {
return {
    restric: 'E',
    scope: {
        acqui: '='
    },
    link: function(scope, element, attrs) {
        scope.$watch(attrs.cardInfo, function(value) {
            if(value.value === "undisclosed") {
                element.css("color", "#FF2100");
            }
        });
    },
    templateUrl: 'js/directives/card.html'
};

});

but value is undefined (I mean value, not value.value)

I also tried in my controller where I set the value to undefined in the first place

acquisitionApp.controller('acquiController', ['$scope','$http','acquiFactory', function($scope, $http, acquiFactory) {
acquiFactory.get()
    .success(function(data) {
        angular.forEach(data, function(value, key) {
            if(data[key].value === -1) {
                data[key].value = "undisclosed";
                angular.element(document.querySelector('#value')).css( "color", "#FF2100");
            }
        })
        $scope.acquis = data;
    });

But that doesn't change anything. I'm really not sure if I'm approaching this at the right angle. How can I achieve this?

Dr. Cool · Accepted Answer · 2016-08-22 23:08:35Z

2

Perhaps you're overdoing it by trying to change the CSS in the directive. Couldn't you just use ng-style on your <h1> element like this?

<h1 id="value" class="value" ng-style="{ color: acqui.value=='undisclosed'? '#FF2100':'' }">{{acqui.value | shortNumber}}</h1>

This will check the value of acqui.value and use either #FF2100 if it's undisclosed or use no value.

answered Aug 22, 2016 at 23:08

Dr. Cool

3,7213 gold badges25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan - Llaver Over a year ago

Wow wonderful! That's exactly what I was trying to do. Definitely overcomplicating things. Follow up question, can I do the same thing to check if acqui.buyer.name.length is greater than a value and if so, lower the font size?

Dr. Cool Over a year ago

For future Googlers who find this answer, yes, you can. You would just use ng-style="{ 'font-size': acqui.buyer.name.length > 100? '8pt':'10pt' }"

Collectives™ on Stack Overflow

Change CSS (or class) of an angular directive element based on data from ng-repeat

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related