CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Angular Learner
Angular Learner

Reputation: 390

Angular Js Directive to add dynamic bootstrap classes

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.

Upvotes: 0

Views: 88

Answers (1)

t0mpl
t0mpl

Reputation: 5025

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

Upvotes: 2

Related Questions