How to add css class to transcluded ng-repeat content in AngularJS

Question

I simplify my problem as following: I want to make a myDirective directive so that:

Developer input:

<my-directive>
    <label ng-repeat="opt in [1,2]">
       <input type="radio" name="radio" id="opt" value="opt" ng-model="radioModel.name"> Radio {{opt}}
    </label>
</my-directive>

Expected html output:

<my-directive>
    <label class="myClass">
       <input type="radio" name="radio" id="opt" value="opt" ng-model="radioModel.name"> Radio {{opt}}
    </label>
    <label class="myClass">
      <input type="radio" name="radio" id="opt" value="opt" ng-model="radioModel.name"> Radio {{opt}}
    </label >
</my-directive>

My question is how could I dynamically add class "myClass" to each label tag? Here is my jsfiddle. As you see, currently I'm able to do so because I manually added each label tag one by one, but I want to use ng-repeat instead. Any ideas/inputs are appreciated.

you should be able to just do this <label class="myClass" ng-repeat="i in [1,2]">{{i}}</label> — jmcgriz
– jmcgriz, Commented Mar 25, 2016 at 18:56
@AmanuelBogale. Sorry, no. What I meant was I wanted to dynamically add class "myClass" to each label tag. Your solution works because the css rule is so simple, but image a more complex rule where, say you want each label tag has its own padding, border-radius etc. Also see my updated example. — philomath
– philomath, Commented Mar 25, 2016 at 21:13
Same thing @GreatQuestion . You would just add the border-radius, and all the styling into one class and add it... — amanuel2
– amanuel2, Commented Mar 25, 2016 at 21:17
@AmanuelBogale, look, you miss my point. Now if you go to your jsfidle, open dev tool, and hover the label tag, you will see something like this: <label class="ng-scope">1</label>. But what I'd like to have is <label class="ng-scope myClass">1</label>. Because I want "myClass" to apply to each label tag individually. — philomath
– philomath, Commented Mar 25, 2016 at 21:20
Oh now i see what you want @GreatQuestion . Can you wait some time so i edit? — amanuel2
– amanuel2, Commented Mar 25, 2016 at 21:21

amanuel2 · Accepted Answer · 2016-03-25 21:39:26Z

1

You just have to add a ng-class....

HTML

<my-directive ng-class="{'myClass':true}">
  <label>1</label>
  <label>2</label>
</my-directive>

JS

var app=angular.module('myapp', [])
.directive('myDirective', function () {
    return {
        restrict:'EA',
        transclude:true,
        template:"<div></div>",
        scope:true,
        link: function (scope, elm, attrs,ctrl,transclude) {
            transclude(scope,function(clone) {

                elm.append(clone);
            });
        }
    };
})

CSS

body {
   background-color: #eef;     
}
.myClass {
    color: red;
}

As seen in fiddle here.

EDIT

After understanding your problem, the only way to attack it is to add element.AddClass('className') , In the directive.

var app=angular.module('myapp', [])
.directive('myDirective', function () {
    return {
        restrict:'EA',
        transclude:true,
        template:"<div></div>",
        scope:true,
        link: function (scope, elm, attrs,ctrl) {
                element.AddClass('myClass');
                $compile(element)(scope);
        }
    };
})

edited Mar 25, 2016 at 21:39

answered Mar 25, 2016 at 18:59

amanuel2

4,6765 gold badges41 silver badges72 bronze badges

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

5 Comments

philomath Over a year ago

where does 'element' come from? And I guess you mean addClass?

amanuel2 Over a year ago

Its angular.element @GreatQuestion look here

philomath Over a year ago

it seems to me that your edit solution does not work. both element and $compile are undefined. It would be great if you can try that out with jsfiddle. Also take into account that the html should use ng-repeat, so you dont want to manually copy and paste <label> tag in the case there are 1000 of them.

amanuel2 Over a year ago

Btw @GreatQuestion how do you use the console in JSFiddle?

philomath Over a year ago

you just type in console.log('something') in the JavaScript section. Click Run (in jsfiddle), open dev tool to see the log.

Collectives™ on Stack Overflow

How to add css class to transcluded ng-repeat content in AngularJS

1 Answer 1

EDIT

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related