Angular Js Directive to add dynamic bootstrap classes

Question

We are implementing reusable code in our application for this purpose we have created a simple directive which displays content.

Directive Code:

angular.module("newsStore.moduleDirectives", [])
    .directive('renderAboutContent', ['aboutService', renderAboutContent]);

function renderAboutContent(aboutService) {
    return {
        restrict: 'AE',
        scope: {},
        templateUrl: 'templates/about.html',
        link: function (scope, element) {
            aboutService.getAboutContent()
                .then(function (results) {
                    scope.aboutList = results.aboutContent.listItems;
                }, function (error) {
                    console.log('controller error', error);
                });
        }
    }
}

HTML code:

<div class="col-md-12 aboutUs-ph padT10 content-ph_abt" ng-repeat="content in aboutList">
    <div class="col-md-2 form-group" ng-if="content.image">
        <img src="{{content.image}}" class="img-responsive" />
    </div>
    <div class="col-md-9">
        <span class="guidedTourText"><b>{{content.title}}</b></span>
        <br>
        <span>{{content.description}}</span>
    </div>
</div>

Question:

In the above HTML you can see col-md-2 and col-md-9 inside col-md-12, we want the col-md-2 and col-md-9 width come up as dynamic as sometimes image may not be present in the col-md-2 so in that case text should occupy col-md-12 not col-md-9.

Thanks guys for the answers, this solutions works in this scenario, but one question let's say I have three div elements, and three of them occupies 4, 4 ,4 if the content is present. Let's say if the content is not present in the last div then the remaining two div's should take 6,6 and vice versa. We want this to be implemented from the directive rather than from the html.

Let me know if I am not clear.

you are not clear, is this should work in your present exemple, or this a totally different scenario ? — t0mpl
– t0mpl, Commented Nov 6, 2015 at 4:37
I did say that the solution which you have provided works in the current scenario, I am asking about another case where we might three different div elements. — Angular Learner
– Angular Learner, Commented Nov 6, 2015 at 4:38

scniro · Accepted Answer · 2015-11-06 04:53:59Z

2

Using ngClass may be leveraged here to solve this. Observe the following...

ng-class="{'col-md-12': !content.image, 'col-md-9': !!content.image}"

For some additional reading, this popular blog post is a great reference for understanding the usages offered by this directive: The Many Ways To Use ngClass

edited Nov 6, 2015 at 4:53

scniro

17k8 gold badges67 silver badges108 bronze badges

answered Nov 6, 2015 at 4:21

t0mpl

5,0453 gold badges34 silver badges37 bronze badges

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

5 Comments

Angular Learner Over a year ago

Thanks @thomas this one works in this scenario, but one question let's say I have three div elements, and three of them occupies 4, 4 ,4 if the content is present. Let's say if the content is not present in the last div then the remaining two div's should take 6,6 and vice versa.

t0mpl Over a year ago

so you use exactly the same method, ng-if combined to conditionnal ng-class

Angular Learner Over a year ago

I didn't get what your trying to say, can you expain that in your answer?

scniro Over a year ago

as a minor enhancement/alternative you can represent this in a ternary style as ng-class="content.image ? 'col-md-9' : 'col-md-12'"

scniro Over a year ago

not understanding the downvote cast here. This does solve the original question. Perhaps including some basic explanation and a resource could prevent such votes

Collectives™ on Stack Overflow

Angular Js Directive to add dynamic bootstrap classes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related